web前端tips：什么是js的事件委托（事件代理）？

JavaScript事件代理（Event Delegation）是一种常见的JavaScript编程技术，它利用事件冒泡（Event Bubbling）机制，将事件处理器绑定在父元素上，从而实现对子元素的事件处理。这种技术可以减少事件处理器的数量，提高性能，同时也可以在动态添加或移除子元素时，避免需要重新绑定事件处理器的问题。

具体来说，当一个事件在某个元素上触发时，会首先在该元素上执行事件处理器，然后事件会向上冒泡到该元素的父元素，接着再执行父元素的事件处理器，直到冒泡到文档根节点为止。

这个过程中，我们可以在父元素上监听事件，并通过事件对象的target属性，来判断具体是哪个子元素触发了事件，从而实现对子元素的事件处理。

例如，我们可以在一个ul元素上监听click事件，并通过事件对象的target属性，来判断点击的是哪个li元素，从而实现对li元素的事件处理，如下所示：

<ul id="list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<script>
var list = document.getElementById('list');
list.addEventListener('click', function(event) {
    
    
  if (event.target.tagName === 'li') {
    
    
    console.log('clicked item:', event.target.innerHTML);
  }
});
</script>

在上面的例子中，我们在ul元素上监听click事件，当事件触发时，判断事件对象的target属性是否是li元素，如果是，则输出该元素的内容。

结语

总的来说，JavaScript事件代理是一种非常实用的技术，它可以减少事件处理器的数量，提高性能，同时也可以避免需要重新绑定事件处理器的问题，特别是在动态添加或移除子元素时，更加方便和灵活。

牵手 持续为你分享各类知识和软件 ，欢迎访问、关注、讨论 并留下你的小心心❤