事件委托 - 掘金

概述

JS 的捕获和冒泡机制允许我们实现一种被称为事件委托的强大的事件处理模式。

基本想法是，如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。

事件委托的优点：

提高页面性能。
可以监听动态元素。

为什么说它更强大呢？举两个例子：

1. 假设给100个按钮添加点击事件

如果用 for 循环给每个按钮都监听一个事件函数，那么占用的内存就很多，可能会影响页面性能。

利用事件委托就可以指定一个事件处理程序管理某一类型的所有事件。

通俗的讲，就是把事情委托给这100个按钮的父元素，假定有一个 div 包裹这100个按钮，那么只需为 div 添加一个点击事件。

代码如下：

// html代码
<div id="div1">
 <button data-id="1">1</button>
 <button data-id="2">2</button>
 <button data-id="3">3</button>
 <button data-id="4">4</button>
 ****************
</div>

// js代码
div1.addEventListener('click', (e)=>{
    const t = e.target
    if(t.tagName.toLowerCase() === 'button'){
        console.log('button'被点击了)
        console.log('button'内容是 + t.textContext) // 获取被点击元素的文本内容
        console.log('button 的data-id是:'+ t.dataset.id) // 获取被点击元素的dataset.id
    }
})

2. 监听目前不存在的元素的点击事件

利用定时器做一个1秒后出现的 button，该如何为其绑定点击事件呢？同样是利用事件委托。

代码如下：

// html代码
<div id="div1">

</div>

// js代码
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'被点击了)
    }
})