《事件委托》

131 阅读1分钟
事件委托又称事件代理(Event Delegation),是JavaScript中常用绑定事件的常用技巧。顾

名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown......)委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

举个通俗的例子 比如一个宿舍的同学同时快递到了,一种方法就是他们一个个去领取,还有一种方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一 一分发给每个宿舍同学;  

在这里,取快递就是一个事件,每个同学指的是需要响应事件的 DOM 元素,而出去统一领取快递的宿舍长就是代理的元素,所以真正绑定事件的是这个元素,按照收件人分发快递的过程就是在事件执行中,需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

事件委托可以大量节省内存占用,减少事件注册,比如在ul上代理所有li的click事件

<ul id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    ...
    <li>item 1000</li>
</ul>
<script>
list.addEventListener('click',(e)=>{
    const t = e.target
    if(t.tagName.toLowerCase() === 'li'){console.log('li被点击了')}
})
</script>