第一模块:
课程名称:DOM事件探秘
章节:3-1~3-3
讲师名称:Amy
第二模块:
什么是事件对象?
在触发DOM上的事件时都会产生一个对象
DOM中的事件对象
1.type属性用于获取事件类型
2.target属性用于获取事件目标
3.stopPropagation()方法用于阻止事件冒泡
4.preventDefault()方法阻止事件的默认行为
IE中的事件对象
1.type属性用于获取事件类型
2.srcElement属性用于获取事件的目标
3.cancelBubble属性用于阻止事件冒泡:设置为true表示阻止冒泡,设置为false表示不阻止冒泡
第三模块:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id='box'>
<input type='button' value="按钮" id='btn' onclick="showMes()" />
<input type='button' value="按钮2" id='btn2' />
<input type='button' value="按钮3" id='btn3' />
<a href="event.html" id='go'>跳转</a>
</div>
<script>
getEvent:function(event){
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
</script>
</body>
</html>// script.js
window.onload=function(){
var go=docoment.getElementById('go');
var box=docoment.getElementById('box');
eventUtil.addHandler(box,'click',function(){
alert('我是整个父盒子');
})
eventUtil.addHandler(go,'click',function(){
e=eventUtil.getEvent(e);
alert(eventUtil.getElement(e));
eventUtil.preventDefault(e);
})
}第四模块: