描述事件冒泡的流程
事件冒泡
- 基于 DOM 树形结构
- 事件会顺着触发元素往上冒泡
- 应用场景:代理
先上一个 html 结构
js
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
来一段冒泡的
js
// 事件绑定函数
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn);
}
const p1 = document.getElementById('p1');
const body = document.body;
bindEvent(p1, 'click', (event) => {
// event.stopPropagation() // 阻止冒泡
console.log('激活');
// 激活
// 取消
});
bindEvent(body, 'click', (event) => {
// 点击其他元素,会在 body 上冒泡
console.log('取消'); // 取消
});