## 事件委托机制 - Pursue_LLL - 沸点 - 掘金

前端

## 事件委托机制

事件委托是 JavaScript 中常用的事件处理机制，它利用了事件冒泡的特性。事件委托的基本思想是将事件处理程序绑定到一个父元素，而不是在每个子元素上都绑定事件处理程序。

当事件发生时，事件首先在触发事件的元素上被处理，然后逐级向上冒泡至根元素，通过判断事件的目标（event.target）来确定是哪个子元素触发了事件。

优点：

性能提升：在大量元素上绑定事件处理程序可能会影响性能，而事件委托可以减少事件处理程序的数量，从而提高性能。

动态元素：对于动态生成的元素，事件委托是一种更方便的方式，不需要为新元素单独绑定事件处理程序。

示例：

html
<ul id="parentList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<script>
// 使用事件委托将点击事件处理程序绑定到父元素
document.getElementById('parentList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
// 只处理 li 元素的点击事件
console.log('Item clicked: ' + event.target.textContent);
}
});
</script>

点击 <ul> 元素的任何 <li> 元素都会触发点击事件，但只有点击 <li> 元素时才会执行事件处理程序。这样就减少了需要绑定事件处理程序的元素数量，提高了性能。

展开

前端开发圈

赞过