什么是事件委托

事件委托是利用事件冒泡的特性，使得当需要监听不存在的元素，动态生成的元素时，一大批的子元素时，会采取的一种方法。

举个例子

1.为一堆子元素添加事件

<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
</div>

此时我们想监听所有的 button，当我们点击 button 时， 我们就输出你好，在这种情境下，就特别适合用事件委托 ，具体做法如下：

div.addEventListener('click', (e) => {
	const t = e.target
    if (t.tagName.toLowerCase() === 'button') {
    	console.log("你好")
    }
})

这个时候，由于冒泡事件，我们无论点击任何一个 button 都会输出你好

2.为动态生成的子元素添加事件

下面的代码会在一秒钟之后生成一个button按钮，通过对父节点的监听，实现了监听动态元素的效果

<div id=div1>
<div>

setTimeOut( () => {
	const button = document.createElement('button')
    button.textContent = 'click'
    div1.appendChild(button)
}, 1000)

div1.addEventListener( 'click', (e)=> {
	const t = e.target
    if (t.tagName.toLowerCase === 'button') {
    	consoloe.log("你好")
    }
})