一、事件传播
- 当你在一个元素上触发一个事件的时候,会按照结构父级的顺序向上传播行为,直到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;
}