jQuery .on() 函数中的可选选择器有什么意义？

Question

jQuery .on() 有一个这样的可选选择器：

$("foo").on(events, ["selector"], handler)

此代码在 DOM 中找到 "foo" 并使用 "selector" 过滤其后代，然后将事件绑定到过滤结果。

我认为上面的代码与没有可选选择器的代码完全相同

 $("foo selector").on(events, handler)

此代码在DOM中找到"foo"，然后在"foo"的后代中找到"selector"（结果与上述代码相同）。

真实例子：

$(".class1").on("click" , ".class2", function(){});

和

$(".class1 .class2").on("click" , function(){});

我的问题是上面的代码有什么区别？

如果没有什么区别，为什么jquery会有这个选项（是不是多余）？

Answer 1

区别在于您希望如何定位特定元素查找与特定表达式中的目标元素。

$(".class1 .class2").on("click" , function(){}); -> 这只会在 class1

中具有 classes class2 的元素上调用点击事件

例如：

$(".class1 .class2").on("click" , function(){
  $(this) // represents elements with class2 inside class1
});

$(".class1").on("click" , ".class2", function(){}); -> 这将针对在点击事件期间 class1 内具有 class class2 的元素。

例如：

$(".class1").on("click" , ".class2", function(){
  $(this) // represents elements with class2 inside elements with class1
});

Answer 2

你应该先了解jQuery.bind()和.delegate()的工作原理，才能理解.on()中的可选参数。

$("#element").bind("click", clickFn) 将事件侦听器附加到 #element 而 $("body").delegate("#element", "click", clickFn) 将事件处理程序附加到正文并将检查事件是否源自 #element，如果是， clickFn 执行，否则忽略。

$("#element").bind("click", clickFn) 与 $("#element").on("click", clickFn);

完全相似

$("body").delegate("#element", "click", clickFn) 与 $("body").on("click", "#element", clickFn)

完全相似

事实上，当.bind()和.delegate()被触发时，jQuery在内部调用.on()。

Answer 3

如果我没记错的话：所有单元格的一个事件处理程序

 $('table').on('click', 'td', function(){...});

每个 td 的单独事件处理程序

$('table td').on('click', function(){...});

Answer 4

使用三个参数，您将使用 "event delegation"。这个技巧可以让你避免两个麻烦：

保持更好的内存性能，因为您将事件附加到父元素，这样您将只有一个事件对许多事件有效，例如，您可以将事件委托点击附加到 div with id "my-element" 并管理所有段落的点击：

$("#my-element").on('click', 'p', function(event) {});

如果您在页面上有关联的事件（例如，点击所有段落）并且您使用 ajax 加载更多段落并添加 html 然后添加新元素不会关联之前的事件，例如：

// jquery will find all "p" on the DOM
$("p").on('click', function(event) {
        // click on element p
    });


// now, if you add more elements p to the DOM, will not have 
// the previous click event, but with event delegation click event will be available automatically

jQuery .on() 函数中的可选选择器有什么意义？

What is the point of optional selector in jQuery .on() function?

javascript

jquery

jquery-selectors