浅谈DOM事件委托

本文你带你了解

• 什么是事件委托

• 事件委托的使用场景和绝招

• 事件委托的优点

一、什么是事件委托

事件委托实际利用的是DOM事件模型中的捕获和冒泡。关于DOM事件模型可以看我的另一篇文章《带你看懂DOM事件模型（事件机制）》

试想一下，假如我们要给一批元素监听相同的事件，需要一个一个去绑定吗，实际上我们可以委托网页中的其他元素——这批元素的祖先元素，来帮助我们监听，这就叫事件委托。

二、事件委托的使用场景和绝招

场景1：如何给100 个按钮添加点击事件？

监听这100个按钮的祖先，等冒泡的时候判断 target 是否是这100个按钮中的一个

div.addEventListener('click', (e)=>{
    const t = e.target
    if(t.tagName.toLowerCase() === 'button'){    
        console.log('button 被点击了')    
        console.log('button data-id 是'+t.dataset.id)    
    }
})

场景2：要监听的元素目前不存在怎么办？

答：监听该元素的祖先，等点击的时候看看是不是想要监听的元素即可

setTimeout(()=>{
    const button = document.createElement('button')
    button.textContent = 'click 1'
    div1.appendChild(button)
}, 1000)
div1.addEventListener('click', (e)=>{
    const t = e.target
    if(t.tagName.toLowerCase() === 'button'){
        console.log('button 被 click 了')
    }
})

由此可见，事件委托的绝招，就是委托需要监听元素的祖先父辈来帮助我们监听

三、事件委托的优点

• 简化监听操作，减少内存占用
• 能够监听动态元素