DOM事件探索
前端开发 JavaScriptD DOM
1.事件流
事件流描述的是从页面中接受事件的顺序。 IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流
- 事件冒泡：事件从最开始的最具体的元素接受，然后逐级向上传递，传递到最不具体的元素（节点，也就是文档）。打个比方就是从处理这件事的业务员传递到总经理的过程。
- 事件捕获：接受过程和事件冒泡相反，最不具体元素最先接受事件然后传递到最具体元素。也就是总经理想起一个什么事然后叫业务员办这个事。
2.事件处理程序
1.HTML事件处理程序 2.DOMO级事件处理程序 3.DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作，addEventListener()和removeEventListener()。接受三个参数：要处理的事件名、作为事件处理程序的函数和布尔值。
4.IE事件处理程序 attachEvent()添加事件 detachEvent()删除事件 这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数
跨浏览器的事件处理程序：
var eventUtil={
// 添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
// 删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
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;
}
}
}使用：
window.onload=function(){
var go=document.getElementById('go'),
box=document.getElementById('box');
eventUtil.addHandler(box,'click',function(){
alert('我是整个父盒子');
});
eventUtil.addHandler(go,'click',function(e){
//e=eventUtil.getEvent(e);
e=e || window.event;
alert(eventUtil.getElement(e).nodeName);
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
});
}3.事件对象
1.DOM中的事件对象 (1)、type:获取事件类型 (2)、target：事件目标 (3)、stopPropagation() 阻止事件冒泡 (4)、preventDefault() 阻止事件的默认行为 2.IE中的事件对象 (1)、type:获取事件类型 (2)、srcElement：事件目标 (3)、cancelBubble=true阻止事件冒泡 (4)、returnValue=false阻止事件的默认行为
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016.10.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录