在事件触发器上使用document和element之间的区别

Question

在事件触发器上给出这两个jquery

$(document).on("click", "a[data-trigger='colorbox']",function(e){

$("a[data-trigger='colorbox']").on("click",function(e){

当我使用第一个颜色框时，我必须在触发颜色框之前两次点击锚标记。对于后续点击，它不需要第二次点击来触发。但对于第二个，首次点击时会触发颜色框。两者之间有什么区别吗？

我的功能内容如下

e.preventDefault();
var currentTarget = $(e.currentTarget);
currentTarget.colorbox({inline : true, href : currentTarget.data("href")});

Answer 1

$(document).on("click", "a[data-trigger='colorbox']",function(e){

这会将click事件绑定到文档及其中的所有子元素。然后，此单击事件检查单击的元素是否与过滤器a[data-trigger='colorbox']

匹配

后者：

$("a[data-trigger='colorbox']").on("click",function(e){

将点击事件直接绑定到a[data-trigger='colorbox']。

现在，如果你的元素是动态的，你会想要使用第一个元素。这意味着您不必继续重新绑定点击事件。如果你的元素是静态的，那么你想使用后者，因为它更有效。

第三种方式（或者更有效地执行第一种选择）是将它绑定到静态的父元素而不是document，然后对元素进行过滤被点击，即

$(parent).on("click", "a[data-trigger='colorbox']",function(e){

这更有效，因为它不需要捕获整个文档上的点击事件

Answer 2

第一种方法捕获从元素通过其父项向文档发出的事件。此方法称为委派事件处理

第二个：直接在元素上捕获事件。

后台发生了什么：

文档结构：

• 文档
  • 大父母
    • 父
      • 元素
    • parent2
  • ...

活动：用户点击元素

结果：

1. 执行元素的所有点击监听器*（您的第二个案例）
2. 活动开始冒泡
3. 父的所有点击侦听器都已执行*
4. 执行祖父母的所有点击监听器*
5. 执行文档的所有点击监听器*（您的第一个案例）

*听众获取事件对象，并可以通过调用取消冒泡：

• event.stopPropagation()：不允许事件传播到父级，而是执行当前级别的所有侦听器。
• event.stopImmediatePropagation()：不允许事件传播给父级，也不会在同一级别调用其他侦听器

JQuery可以在绑定到文档的侦听器中处理元素的单击事件，因为在每个图层上都可以检查click事件对象以获取信息：

• 当前处理事件event.currentTarget
• 最初点击的元素event.target

更多 jQuery docs

回到你的情况

案例2

非常简单：

1. 点击元素
2. 执行其处理程序

如果动态添加/删除元素等。您必须处理其处理程序（分配/取消分配等）。

案例1

点击元素：

1. 事件一直持续到文档
2. 文档上的处理程序称为
3. 处理程序验证事件是否来自对元素进行的点击

如果您的元素是动态添加/删除的，并且您不想管理其上的点击处理程序，则应选择此解决方案。不过你不应该在文档上分配它，因为那时基本的监听器将被调用每次点击页面，jQuery将检查target是否是你感兴趣的元素，如果是这种情况，请调用您指定的处理程序。总而言之，如果过度使用，这会降低性能。

了解这一切可以帮助您了解您的情况中的行为差异。