JS事件流(W3C与IE区别)

时间:2022-04-08 14:25:28

一、JS事件的3个阶段:捕获、目标、冒泡,低版本IE不支持捕获阶段;

二、在浏览器解析事件的时候,有两种触发方式:一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获)。

冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时,依次它的父元素的click事件也被fire(触发),一直传递到最顶层的body元素为止。而捕获的触发方式正好相反,当某个元素的click事件被触发时,先从最顶层的body元素click事件被触发开始,一直传递到真正被触发的元素为止。

1、W3C事件流:

(1)从根文档(html)开始遍历所有子节点,如果目标事件的父节点设置为捕获时触发,则执行该事件,直到目标被执行,然后再事件冒泡(设置为捕获时触发的事件不再被执行)。

(2)支持冒泡和捕获方法,并且可以在一个DOM上绑定多个事件处理器,各自不会冲突,

(3)addEvntListener(removeEventListener)有三个参数:第一个-->事件类型;第二个-->处理函数,直接给函数名或函数体;第三个-->布尔值,表示是否支持捕获事件;

(4)通过addEventListener和removeEventListener来实现函数的添加和删除。

2、ie事件流:

(1)从目标事件被执行,然后再冒泡父节点的事件,直到根文档;

(2)只支持冒泡,并且可以在一个dom上绑定多个事件处理函数;

(3)attachEvent(detachEvent)参数与W3C标准相同,注意:事件类型前+on;没有布尔参数;

(4)通过attachevent和detachevent来实现函数的添加和删除。

3、阻止某浏览器DOM元素的默认行为:

(1)W3C通过调用e.preventDefault();

(2)IE则通过window.event.returnValue=false;

4、阻止冒泡事件:

(1)W3C调用e.stopPropagation();或者 return false;

(2)IE通过设置window.event.cancleBubble=true;

5、 javascript 兼容W3c和IE的添加(取消)事件监听方法:

//添加事件监听兼容函数
function addHandler(target, eventType, handler){
if(target.addEventListener){//主流浏览器
addHandler = function(target, eventType, handler){
target.addEventListener(eventType, handler, false);
};
}else{//IE
addHandler = function(target, eventType, handler){
target.attachEvent("on"+eventType, handler);
};
}
//执行新的函数
addHandler(target, eventType, handler);
}
//删除事件监听兼容函数
function removeHandler(target, eventType, handler){
if(target.removeEventListener){//主流浏览器
removeHandler = function(target, eventType, handler){
target.removeEventListener(eventType, handler, false);
}
}else{//IE
removeHandler = function(target, eventType, handler){
target.detachEvent("on"+eventType, handler);
}
}
//执行新的函数
removeHandler(target, eventType, handler);
}

三、手写事件模型及事件代理、委托

1、事件代理/委托的优缺点,是靠冒泡机制来实现的:

优点:

(1)可以减少大量内存占用,减少事件注册;

(2)可以实现当新增子对象时,无需再对其绑定事件,对于动态内容部分更合适;

缺点:如果所有事件都用事件代理,则可能会出现事件误判,即本不应该触发的对象绑上了事件。