JavaScript原生+jQuery 事件委托

JavaScript 事件委托

JavaScript事件委托是一种优化事件处理的技术，通过将事件处理程序绑定到父元素而不是每个子元素上来提高性能。当事件发生时，事件会逐级冒泡到父元素，然后由父元素触发事件处理程序。

使用事件委托的好处是可以减少内存消耗和事件处理程序数量，尤其在有大量子元素需要绑定事件的情况下。此外，事件委托还可以动态处理新增或删除的子元素，而无需重新绑定事件。

以下是一个使用事件委托的示例：

HTML代码:

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

JavaScript代码:

// 获取父元素
var list = document.getElementById("myList");

// 创建事件处理程序
function handleClick(event) {
  // 在控制台输出点击的子元素文本内容
  console.log(event.target.innerText);
}

// 绑定事件处理程序到父元素
list.addEventListener("click", handleClick);

在上述示例中，我们首先获取了父元素<ul>，然后创建了一个事件处理程序handleClick。在事件委托的模式中，事件处理程序会被绑定到父元素<ul>上，而不是每