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>上，而不是每个子元素<li>上。当点击子元素时，事件会冒泡到父元素，并触发事件处理程序。然后，事件处理程序可以通过event.target来获取点击的子元素，并执行相应的操作。
使用事件委托可以简化代码并提高性能，特别是在处理大量子元素的情况下。
jQuery 事件委托
jQuery 也提供了事件委托的机制，使得事件处理更加简便和高效。通过使用 .on() 方法，你可以将事件处理程序绑定到父元素上，并通过选择器来指定需要处理的子元素。
下面是一个使用 jQuery 的事件委托的例子：
HTML 代码：
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
JavaScript 代码：
// 获取父元素
var list = $("#myList");// 创建事件处理程序
function handleClick(event) {// 在控制台输出点击的子元素文本内容console.log($(event.target).text());
}// 绑定事件处理程序到父元素
list.on("click", "li", handleClick);
在上述示例中，我们首先使用 $ 函数获取了父元素 list。然后，我们创建了一个事件处理程序 handleClick，它使用 $(event.target) 来获取点击的子元素，并调用 .text() 方法来获取文本内容。
接下来，在使用 .on() 方法时，我们传递两个参数。第一个参数是事件类型，这里是 "click"，表示我们希望处理点击事件。第二个参数是选择器，这里是 "li"，表示我们希望处理所有的 <li> 子元素的点击事件。通过将事件处理程序绑定到父元素上，jQuery 会自动处理冒泡事件，并在符合选择器条件的子元素上触发事件处理程序。
使用 jQuery 的事件委托可以简化代码，并且在处理大量子元素或动态添加/删除子元素时非常方便。
原生js事件委托的代码实例
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) {// 检查点击的元素是否是 <li> 元素if (event.target.tagName === "LI") {// 在控制台输出点击的子元素文本内容console.log(event.target.innerText);}
}// 绑定事件处理程序到父元素
list.addEventListener("click", handleClick);
在上述示例中，我们首先使用 getElementById() 方法获取了父元素 list。然后，我们创建了一个事件处理程序 handleClick。
在事件处理程序中，我们使用 event.target 来获取触发事件的元素，并通过 tagName 属性检查它是否是 <li> 元素。只有当点击的元素是 <li> 元素时，我们才在控制台输出子元素的文本内容。
最后，我们使用 addEventListener() 方法将事件处理程序绑定到父元素上，并指定事件类型为 "click"。
这样，当我们点击列表中的任何一个 <li> 元素时，都会触发父元素的点击事件，然后通过事件委托机制，只有符合选择器条件的子元素才会触发事件处理程序。