事件委托是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
它的实质是把事件监听放在祖先元素（如父元素、爷爷元素）上。
引例一：给 100 个按钮添加点击事件
方法：监听这 100 个按钮的祖先，等冒泡时判断 target 是不是这 100 个按钮中的一个
<body>
<!-- div#div1>button{click $}*10 -->
<div id="div1">
<button>click 1</button>
<button>click 2</button>
<button>click 3</button>
<button>click 4</button>
<button>click 5</button>
<button>click 6</button>
<button>click 7</button>
<button>click 8</button>
<button>click 9</button>
<button>click 10</button>
</div>
</body>
div1.addEventListener('click', (e) => {
const t = e.target
if(t.tagName.toLowerCase()==='button'){
console.log('button 被点击了')
console.log('button 被点击了' + t.textContent)
}
})
引例二：监听目前不存在的元素的点击事件
方法：监听祖先，等点击的时候判断是不是我想监听的元素
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')
}
})
事件委托优点：
- 节约监听数量，减少内存消耗
- 可用于监听动态生成的元素
本文参考摘录了
