事件流 事件传播 事件委托 阻止事件传播 js

一、事件传播

• 当你在一个元素上触发一个事件的时候，会按照结构父级的顺序向上传播行为，直到window为止
• 当事件触发的时候，会按照结构父级的顺序向上传递同类型的事件
• 在事件对象里面有一个path属性，表示当前事件的传播路径

二、事件流

• 事件发生时发在元素节点之间按照特定顺序进行传播。这个传播的过程既是 DOM事件流
• 事件流分为两个阶段

• 捕获阶段

• 像是在水面上扔了一个石头一样，它有一个下降的过程
• 从window到目标元素的顺序执行绑定的事件

• 冒泡阶段

• 像小泡泡一样，从目标元素到window的顺序来执行所有的事件

三、注册事件的方式

传统onclick 和 ie低版本 attachEvent 只能得到冒泡

• 事件监听的第三个参数是一个布尔值，默认是false 表示执行冒泡 ，true则表示执行捕获的事件流
• 元素.addEventListener(‘事件类型’,事件处理函数[,false])
• 事件监听决定是按照冒泡还是捕获来执行事件
• 实际开发中使用捕获场景比较少

四、从事件委托

也称为事件代理

• 不需要给每一子节点都绑定事件，而是将子节点的事件绑定到他们共同的结构父级接节点上，这样在点击每一个子节点的时候，会利用事件传播冒泡执行父节点上绑定的事件
• 事件委托的优点：

• 减少元素事件绑定，只操作一次DOM提高了程序性能
• 对新添加的子元素也可以执行事件，不需要单独添加事件

五、阻止事件传播

• 因为事件的传播会导致一个元素触发行为，会执行多个元素绑定的同类型事件的事件处理函数
• 阻止事件传播方式

• 标准浏览器：事件对象.stopPropagation() Propagation传播
• ie低版本：事件对象.cancelBubble=true cancel 取消 Bubble 泡泡

兼容写法

            if(e.stopPropagation){
                //标准浏览器
                e.stopPropagation()

            }else{
                 //ie 低版本阻止事件传播
                 e.cancelBubble=true;
            }

或

            //  使用try处理兼容性
            try{
                e.stopPropagation();
            }catch(err){
                e.cancelBubble=true;
            }