jquery - $(element).on(event) 与 $(ancestor).on(event, element)

Question

自从添加了以下功能后，我几乎一直在使用后者.on()，但我最近注意到很多答案都使用前者。

有什么区别：

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

和：

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

score 4 · Accepted Answer

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

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

委派具有效率的额外优势。想象一下，您想将一个事件处理程序绑定到li一个大列表中的每个元素。将单个处理程序绑定到ul委托给li元素的 parent 比绑定同一函数的多个副本要有效得多。

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

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

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

score 0 · Accepted Answer

对我来说你的第一个：

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

当某些元素已被动态加载或创建时使用。将事件直接绑定到那些将不起作用，因此需要将事件委托给其最近的父元素，这在页面加载时$(document)可用是始终可用于委托事件的那些之一。

你的第二个：

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

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

2 回答 2