jQuery委托事件
示例
让我们从例子开始。这是一个非常简单的HTML示例。
HTML范例
<html>
<head>
</head>
<body>
<ul>
<li>
<a href="some_url/">Link 1</a>
</li>
<li>
<a href="some_url/">Link 2</a>
</li>
<li>
<a href="some_url/">Link 3</a>
</li>
</ul>
</body>
</html>问题
现在在此示例中，我们想向所有<a>元素添加事件侦听器。问题在于此示例中的列表是动态的。<li>随着时间的流逝，添加和删除元素。但是，页面不会在更改之间刷新，这将使我们能够对链接对象（即）使用简单的click事件监听器。$('a').click()
我们面临的问题是如何向事件<a>元素添加事件。
背景信息-事件传播
仅由于事件传播（通常称为事件冒泡）才可能委派事件。每当触发事件时，事件都会一直冒泡（到达文档根目录）。它们将事件的处理委派给不变的祖先元素，因此将其命名为“委派”事件。
因此，在上面的示例中，clicking<a>元素链接将按以下顺序触发这些元素中的“click”事件：
一种
里
ul
身体
html
文件根
解
知道事件冒泡是做什么的，我们可以捕获通过HTML传播的想要的事件之一。
在此示例中捕获<ul>元素的一个好地方是元素，因为该元素不是动态的：
$('ul').on('click', 'a', function () {
console.log(this.href); //jQuery将事件函数绑定到目标DOM元素
//这样，“this”是指锚点而不是列表
//单击链接后您想做什么
});在上面：
我们有“ul”，它是此事件侦听器的接收者
第一个参数（“点击”）定义了我们尝试检测的事件。
第二个参数（'a'）用于声明事件的来源（此事件侦听器的接收者ul下的所有子元素）。
最后，第三个参数是在满足第一个和第二个参数要求的情况下运行的代码。
详细了解解决方案的工作方式
用户点击次数<a>元素
触发<a>元素上的点击事件。
事件开始向文档根目录冒泡。
事件首先冒泡到<li>元素，然后冒泡到<ul>元素。
由于<ul>元素已附加事件侦听器，因此将运行事件侦听器。
事件侦听器首先检测触发事件。冒泡事件是“单击”，而侦听器有“单击”，这是通过。
侦听器检查尝试将第二个参数（'a'）与气泡链中的每个项目进行匹配。由于链中的最后一项是“a”，因此与过滤器匹配，这也是通过。
第三个参数中的代码按原样使用匹配项运行this。如果函数不包含对的调用stopPropagation()，则该事件将继续向上向根（document）传播。
注意：如果没有合适的祖先/祖先，请使用document。由于'body'以下原因，请勿使用：
body有一个与样式有关的错误，这可能意味着鼠标事件不会发生。这取决于浏览器，并且可能在计算的主体高度为0（例如，所有子元素都具有绝对位置）时发生。鼠标事件始终会冒泡document。
document脚本始终存在，因此您可以将委托的处理程序附加到支持DOM的处理程序document之外，并确保它们仍然可以工作。