事件传播模式
事件冒泡:事件由最具体的元素接收,不断经过上级节点,直到页面元素document。
事件捕获:事件由最外层页面元素接收,不断经过下级节点,直到触发的目标节点。
浏览器默认按照冒泡方式传播。
三个阶段
冒泡阶段: 冒泡传播模式中,由目标节点到document的过程,叫冒泡阶段。
目标阶段: 事件不断传递(或直接触发),最终在具体元素(目标节点)上触发的时候,叫做目标阶段。
捕获阶段:捕获传播模式中,由document到目标节点的过程,叫捕获阶段。
可打印e.eventPhase判断当前属于什么阶段:1-捕获 2-目标 3-冒泡
事件监听器 addEventListener
addEventListener(eventName,callback,useCapture)
useCapture 指定事件传播模式,表示以哪个顺序接收事件。
false (默认) 冒泡传播
true 捕获传播
DOM示例
/*css*/
.box{margin:10% auto;color:#fff;text-align: center;}
#box1{width:300px;height: 300px;background-color: #2d3436;}
#box2{width:200px;height: 200px;background-color: #636e72;}
#box3{width:100px;height: 100px;background-color: #b2bec3;}
/*html*/
<div id="box1" class="box">box1
<div id="box2" class="box">box2
<div id="box3" class="box">box3</div>
</div>
</div>
/*js*/
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var useCapture = false;
document.addEventListener('click',e=>{
console.log('document触发click事件。',e.eventPhase)
},useCapture);
box1.addEventListener('click',e=>{
console.log('box1触发click事件。',e.eventPhase)
},useCapture);
box2.addEventListener('click',e=>{
console.log('box2触发click事件。',e.eventPhase)
},useCapture);
box3.addEventListener('click',e=>{
console.log('box3触发click事件。',e.eventPhase)
},useCapture);
当前属于默认冒泡传播模式,点击box3输出:
box3触发click事件。 2
box2触发click事件。 3
box1触发click事件。 3
document触发click事件。 3
修改useCapture=true,变更为捕获传播模式,点击box3输出:
document触发click事件。 1
box1触发click事件。 1
box2触发click事件。 1
box3触发click事件。 2
目标阶段定义:
删除box3的事件监听,点击box3,box2事件打印的阶段不是2,因为box3才是目标节点。
点击box2,box2事件打印的是2,因为box2正是目标节点。
事件委托/事件代理
原理: 事件冒泡机制
事件触发,触发事件的**最具体元素(目标节点)**将作为参数传给回调事件callback。
// 在上面事件回调中打印触发事件的元素,点击box3发现打印的都是box3
document.addEventListener('click',e=>{
console.log(e.target)
});
box1.addEventListener('click',e=>{
console.log(e.target)
});
box2.addEventListener('click',e=>{
console.log(e.target)
});
box3.addEventListener('click',e=>{
console.log(e.target)
});
于是可以委托父级监听子元素的事件,而不用给每个子元素注册事件
// 上面4个注册可统一为这一个
document.addEventListener('click',e=>{
console.log(e.target)
// 可根据e的一些属性或nodeName判断是子元素还是父元素
});
事件委托/代理优点:
1.减少内存占用,减少事件注册。
2.js新增子元素动态绑定事件(无需再次对其绑定)
使用事件委托注意事项:
使用“事件委托”时,并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时,越靠近顶层,事件的”事件传播链”越长,也就越耗时。如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失。