JS事件流（W3C与IE区别）

一、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）可以实现当新增子对象时，无需再对其绑定事件，对于动态内容部分更合适；

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