Question

自从.on()添加以来，我一直在使用以下函数中的后者，但我最近注意到很多答案都使用了前者。

有什么区别：

$(ancestor).on(event, element, function() { ... })

和

$(element).on(event, function() { ... })

JSFiddle example

Answer 1

第一个示例委托 DOM树上方的事件处理程序。这意味着它可以附加到DOM中的元素（ancestor），但适用于可能尚未存在于DOM中的后代（element）。

第二个示例将事件处理程序直接附加到element，这意味着在代码运行时该元素必须存在于DOM中。

代表团具有效率的附加优势。想象一下，您希望将事件处理程序绑定到大型列表中的每个li元素。将单个处理程序绑定到委托给ul元素的父li，而不是绑定同一函数的许多副本，效率要高得多。

委派是有效的，因为大多数DOM事件冒泡从它们所源自的元素（目标）开始。按照前面提到的li示例，请考虑以下代码：

$("#myList").on("click", "li", function () { /* Do stuff */ });

当点击#myList的后代时，会生成一个click事件，并会从该元素冒泡到#myList（这是一个小小的简化 - 还有另一个阶段被称为＆＃34;捕获＆＃34;但这里并不重要的事件。绑定到#myList的事件处理程序将被触发，jQuery将检查目标元素是否与选择器匹配。如果是，则执行处理程序。

Answer 2

给我你的第一个：

$(ancestor).on(event, element, function() { ... })

某些元素已动态加载或创建时使用

。对事件的直接绑定不起作用，因此需要事件委托到其最接近的父元素，这在页面加载时是可用的$(document)是始终可用于委派事件的那些之一。

你的第二个：

$(element).on(event, function() { ... })

这是事件在元素上的直接绑定，但这将适用于页面加载时出现的元素。

$（element）.on（event）vs $（ancestor）.on（event，element）

2 个答案: