1）type属性 用于获取事件类型
2）srcElement属性 用于获取事件的目标
3）cancelBubble属性 用于阻止事件冒泡
设置为true表示阻止事件冒泡 设置为false表示不阻止冒泡
4）returnValue属性 用于阻止事件的默认行为
设置为false表示阻止事件的默认行为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="script.js"></script>
<script src="event.js"></script>
<script type="text/javascript">
//dom中的事件对象：
//type属性获取事件类型
//target获取事件目标
//stopPropagation阻止事件冒泡（最具体的元素接收）
//preventDefault()阻止事件的默认行为
// window.onload=function(){
// var btn2=document.getElementById(‘btn2‘);
// btn2.onclick=function(){
// alert(‘这个是dom0级添加的事件‘)
// }
// btn2.onclick=null;
// var btn3=document.getElementById(‘btn3‘);
/* btn3.addEventListener(‘click‘,showMessage,false);
btn3.addEventListener(‘click‘,function(){
alert(this.value)
},false);*/
// btn3.removeEventListener(‘click‘,showMessage,false);
// btn3.attachEvent(‘onclick‘,showMessage)
// }
// function showMessage(event){
// event=event || window.event;
// var ele=event.target||event.srcElement;
// alert(ele);
// //alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型
// ev.stopPropagation();//阻止事件冒泡（最具体的元素接收）
// }
// function showBox(){
// alert("这是一个box")
// }
// function stopGoto(event){
// event.stopPropagation();
// event.preventDefault();
// }
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMessage()"/>
<input type="button" value="按钮2" id="btn2"/>
<input type="button" value="按钮3" id="btn3"/>
<a href="evnt.html" id="go">跳转</a>
</div>
<script>
// var btn3=document.getElementById(‘btn3‘);
// var box=document.getElementById(‘box‘);
// eventUtil.addHandler(btn3,‘click‘,showMessage);
// eventUtil.addHandler(box,‘click‘,showBox);
// eventUtil.addHandler(go,‘click‘,stopGoto);
// eventUtil.removeHandler(btn3,‘click‘,showMessage);
</script>
</body>
</html>
window.onload=function(){
var go=document.getElementById(‘go‘),
box=document.getElementById(‘box‘);
eventUtil.addHandler(box,‘click‘,function(){
alert(‘我是整个父盒子‘);
});
eventUtil.addHandler(go,‘click‘,function(e){//接收事件event
//e=e||window.event;
e=eventUtil.getEvent(e);//返回event
alert(eventUtil.getElement(e).nodeName);
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
});
}
var eventUtil={
//添加句柄
// var element,type,handler;
addHandler:function(element,type,handler){
if(element.addEventListener){//dom二级
element.addEventListener(type,handler,false)
}else if(element.attachEvent){//IE
element.attachEvent(‘on‘+type,handler);
}else{//dom0级
element[‘on‘+type]=handler;//element.onclick===element[‘onclick‘]
}
},//对象的属性用“，”分隔
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){//dom二级
element.removeEventListener(type,handler,false)
}else if(element.detachEvent){//IE
element.detachEvent(‘on‘+type,handler);
}else{//dom0级
element[‘on‘+type]=null;//element.onclick===element[‘onclick‘]
}
},
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;
}
}
}
时间： 2024-10-12 19:51:53