jQuery 事件委托是一种强大的技术，它允许你将事件处理程序绑定到一个父元素上，而不是直接绑定到每个子元素。当子元素上的事件触发时，事件会冒泡到父元素，然后由父元素上绑定的事件处理程序来处理。这种技术在处理动态添加的元素或大量子元素时非常有用，因为你不需要为每个子元素单独绑定事件。
基本原理
事件委托基于事件冒泡机制。当一个事件在子元素上触发时，它会依次向上冒泡到其父元素、祖父元素，直到到达文档根元素。因此，可以在父元素上监听事件，并根据事件的目标元素来执行相应的操作。
语法
$(parentSelector).on(eventType, childSelector, function(event) {
// 事件处理代码
});
parentSelector：父元素的选择器，事件处理程序将绑定到这个父元素上。eventType：要监听的事件类型，如click、mouseover等。childSelector：子元素的选择器，只有匹配这个选择器的子元素触发的事件才会被处理。function(event)：事件处理函数，当事件触发时执行。
示例
静态元素的事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Event Delegation - Static Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="myList">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<script>
// 使用事件委托为列表项绑定点击事件
$('#myList').on('click', 'li', function () {
alert('你点击了: ' + $(this).text());
});
</script>
</body>
</html>
在这个示例中，事件处理程序绑定到了 <ul> 元素上，当用户点击任意 <li> 元素时，事件会冒泡到 <ul> 元素，然后由绑定的事件处理程序处理。
动态元素的事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Event Delegation - Dynamic Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="myList">
<li>列表项 1</li>
</ul>
<button id="addItem">添加列表项</button>
<script>
// 使用事件委托为列表项绑定点击事件
$('#myList').on('click', 'li', function () {
alert('你点击了: ' + $(this).text());
});
// 点击按钮动态添加列表项
$('#addItem').click(function () {
$('#myList').append('<li>新列表项</li>');
});
</script>
</body>
</html>
在这个示例中，即使新的 <li> 元素是动态添加的，由于使用了事件委托，它们同样可以触发点击事件。
优点
- 减少事件处理程序的数量：不需要为每个子元素单独绑定事件，减少了内存开销。
- 动态元素支持：对于动态添加到 DOM 中的元素，不需要重新绑定事件处理程序。
注意事项
- 事件冒泡：事件委托依赖于事件冒泡机制，因此对于不冒泡的事件（如
focus和blur），需要使用focusin和focusout等替代事件。 - 选择合适的父元素：父元素应该尽可能接近子元素，以减少不必要的事件冒泡。
