DOM事件-冒泡、捕获、传播、委托

事件捕获

　　以点击事件为例事，同类型事件会由根元素开始触发，向内传播，一直到目标元素。从外到内依次触发：根—目标的祖先素—目标的父元素—目标元素。

事件冒泡

　　根事件捕获截然相反。发生点击事件时，事件会从目标元素上开始触发，向外传播，一直到根元素停止。从内到外依次触发：目标元素—目标元素的父元素—父元素的父元素—根。

事件传播

　　事件捕获和事件冒泡都有事件传播阶段，传播阶段就是事件从触发开始到结束的过程。

　　优先级：先捕获，再冒泡。

　　两种传播方式的来源：W3C推行DOM2级事件之前网景和IE在打架，网景用的事件传播方式是捕获，IE用的事件传播方式是冒泡。

事件注册方式

　　实现方式：就是在dom元素上提供了一个通用方法，用于注册事件处理程序，指定事件传播方式。

　　兼容问题：IE9以下不支持捕获，它用于注册事件处理程序的方法也跟其他浏览器不一样。

　　addeventListener(event, listener, useCaptrue)

　　　特性：通过第三个参数控制本次注册的事件的传播方式。

　　　参数：event(事件类型)  listener(事件处理函数)  useCaptrue(是布尔值，默认为false使用冒泡这个传播方式，设置为true就是使用捕获)。

　　IE10以下：attachEvent(evnet, listener)

　　　特性：事件传播方式默认使用冒泡，不支持事件捕获。

　　　参数：event(事件类型)  listener(事件处理函数)、

取消冒泡

　　我们经常需要取消冒泡防止事件在传播过程中错误的触发不相干的处理程序。实现方式就是在事件处理函数中通过事件对象来阻止事件传播。

　　DOM标准浏览器中：event.stopPropagation()   停止传播

　　IE9以下：event.cancelBubble=true   取消冒泡

事件委托

　　event对象：事件处理函数中可以接收到一个event对象，这个对象记录了相关的事件信息。

　　原理：就是在父元素上注册事件处理程序，通过事件处理函数中接收的event对象中的target 属性获取事件的源，根据不同的源，做不同的操作。

// 在document上注册点击事件，根据不同的源，做不同的操作
document.addEventListener("click",function(e){
　　 var event = e||window.event; // ie9以下的事件对象是放在window下的。
    var targetID = event.target.id ;
    if(targetID === "hero"){
        console.log("hero被点了！");
    }
    if(targetID === "python"){
        console.log("python被点了");
    }
},false);

转载于:https://www.cnblogs.com/keliguicang/p/10994548.html