面试题：JavaScript 中事件委托的原理及应用场景

事件委托原理

事件冒泡：在JavaScript中，当一个元素触发某个事件（如点击事件）时，该事件会首先在该元素上触发，然后会向上传播到其父元素，再到父元素的父元素，一直到文档的根节点。这就是事件冒泡机制。
事件委托实现：事件委托正是利用了事件冒泡这一特性。通过将事件处理程序绑定到共同的祖先元素上，而不是每个具体的目标元素。当事件在目标元素上触发并冒泡到祖先元素时，祖先元素的事件处理程序可以通过event.target来判断真正触发事件的目标元素，从而执行相应的操作。这样可以减少事件处理程序的数量，提高性能。

适合使用事件委托的应用场景

列表项点击：假设我们有一个包含许多列表项的无序列表，例如：

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

如果我们想为每个列表项添加点击事件，传统方式是为每个li元素分别绑定事件处理程序。但使用事件委托，可以这样做：

const list = document.getElementById('list');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('You clicked on', event.target.textContent);
  }
});

这样，无论有多少个列表项，都只需要绑定一个事件处理程序到ul元素上，通过event.target判断点击的是否是li元素并执行相应操作。

动态添加元素的事件处理：例如有一个按钮，点击它会动态添加新的按钮。

<button id="addButton">Add Button</button>
<div id="buttonContainer"></div>

const addButton = document.getElementById('addButton');
const buttonContainer = document.getElementById('buttonContainer');

addButton.addEventListener('click', function() {
  const newButton = document.createElement('button');
  newButton.textContent = 'New Button';
  buttonContainer.appendChild(newButton);
});

buttonContainer.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    console.log('You clicked on a button:', event.target.textContent);
  }
});

这里通过将点击事件委托给buttonContainer，即使动态添加的按钮也能有相应的点击处理，无需为新添加的按钮单独绑定事件处理程序。

星途面试题库

面试题：JavaScript 中事件委托的原理及应用场景

知识考点

面试题答案

事件委托原理

适合使用事件委托的应用场景