Event: target property 事件委托

The event.target property can be used in order to implement event delegation.

翻译： 事件目标属性（event.target）可以用来实现事件委托。

事件委托是一种在JavaScript中处理事件的技巧，其中父级元素处理其所有子级元素的事件，而不是为每个子级元素添加独立的事件监听器。这种方法在处理大量子元素的事件时可以提高性能和可维护性。

event.target 属性在事件委托中起关键作用。它指向触发事件的具体元素，即使事件监听器是在更高级别的父元素上注册的。通过event.target，事件处理程序可以了解是哪一个子元素触发了事件，从而采取相应的行动。

举一个例子

假设你有一个列表，每个列表项都需要响应单击事件。使用事件委托，你可以将事件监听器添加到列表的父元素，然后使用 event.target 确定实际被单击的列表项。

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

const list = document.getElementById('myList');

list.addEventListener('click', (event) => {
  // event.target 是实际被点击的元素
  if (event.target.tagName === 'LI') { // 确保是列表项
    console.log('Clicked on:', event.target.textContent);
  }
});

在这个例子中，事件监听器添加到整个列表 (<ul>) 上，但 event.target 指向实际被单击的列表项 (<li>)。通过这种方式，你可以通过较少的事件监听器来处理大量子元素的事件，从而简化代码和提高性能。