• 基于 DOM 树形结构
  • 事件会顺着触发元素往上冒泡
  • 应用场景:代理

先上一个 html 结构

<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>

来一段冒泡的

// 事件绑定函数
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('取消') // 取消
})

标签: none

添加新评论