直接与委托-jQuery .on()

2020/10/28 16:42 · javascript ·  · 0评论

我正在尝试使用jQuery .on()方法来理解直接事件处理程序委托事件处理程序之间的特殊区别具体来说,本段的最后一句话:

selector被提供时,事件处理程序被称为委托当事件直接发生在绑定元素上时,不调用处理程序,而仅对与选择器匹配的后代(内部元素)进行调用。jQuery使事件从事件目标一直冒泡到附加了处理程序的元素(即,最内层元素到最外层元素),并沿着该路径运行与选择器匹配的任何元素的处理程序。

“为任何元素运行处理程序”是什么意思?我制作了一个测试页来试验这个概念。但是以下两个构造导致相同的行为:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

要么,

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

也许有人可以参考其他示例来阐明这一点?谢谢。

情况1(直接):

$("div#target span.green").on("click", function() {...});

==嘿!我希望div#target内的每个span.green都监听:单击时,请执行X。

案例2(授权):

$("div#target").on("click", "span.green", function() {...});

==嗨,div#target!当您的“ span.green”子元素中的任何一个被单击时,对它们进行X。

换一种说法...

在情况1中,已分别给每个跨度指示。如果创建了新的跨度,他们将不会听到指令,也不会响应点击。每个跨度直接负责其自身的事件。

在第2种情况下,仅向容器提供了指令;它负责代表其子元素注意点击捕获事件的工作已委派这也意味着该指令将针对将来创建的子元素执行。

第一种方法,$("div#target span.green").on()将单击处理程序直接绑定到在执行代码时与选择器匹配的跨度。这意味着,如果以后添加其他跨度(或更改其类以使其匹配),则它们将错过,并且将没有单击处理程序。这也意味着,如果您以后从某个跨度中删除“绿色”类,其单击处理程序将继续运行-jQuery不会跟踪处理程序的分配方式,而是检查选择器是否仍然匹配。

第二种方法,$("div#target").on()将点击处理程序绑定到匹配的div(同样,这与当时匹配的div相对),但是当在div中某处发生点击时,仅当单击时才运行处理程序功能不仅发生在div中,而且发生在与第二个参数.on()“ span.green”中的选择器匹配的子元素中以这种方式执行时,创建这些子跨度并不重要,单击它们仍将运行处理程序。

因此,对于不是动态添加或更改其内容的页面,您不会注意到这两种方法之间的差异。如果要动态添加额外的子元素,则第二种语法意味着您不必担心为它们分配点击处理程序,因为您已经在父项上完成了一次。

对N3dst4的解释是完美的。基于此,我们可以假定所有子元素都在主体内部,因此我们只需要使用以下内容:

$('body').on('click', '.element', function(){
    alert('It works!')
});

它适用于直接或委托事件。

与OP相切,但是帮助我消除此功能混乱的概念是,绑定元素必须是所选元素的父元素

  • 绑定是指剩余的内容.on
  • 选择是指的第二个参数.on()

委托不像.find()那样工作,它选择绑定元素的子集。选择器仅适用于严格的子元素。

$("span.green").on("click", ...

$("span").on("click", ".green", ...

尤其是,要获得@ N3dst4提示“将来创建的元素”的好处,绑定元素必须是永久父元素然后,选定的孩子可以来去去。

编辑

为何.on不起作用的清单

棘手的原因为何$('.bound').on('event', '.selected', some_function)不起作用:

  1. 绑定元素不是永久的它是在调用后创建的.on()
  2. 所选元素不是绑定元素的适当元素。这是相同的元素。
  3. Selected元素通过调用防止事件冒泡到绑定元素.stopPropagation()

(省略一些棘手的原因,例如选择器拼写错误。)

我写了一篇比较直接事件和委托的文章。我比较了纯js,但是它对于仅封装它的jquery具有相同的含义。

结论是委托事件处理用于动态DOM结构,在用户与页面交互时可以创建绑定元素(无需再次绑定),而直接事件处理用于静态DOM元素(当我们知道结构不会改变时)。

有关更多信息和完整比较
-http://maciejsikora.com/standard-events-vs-event-delegation/

使用总是委派的处理程序(我认为这很流行)是不正确的方式,许多程序员使用它是因为“应该使用它”,但事实是直接事件处理程序在某些情况下更好,并且应该选择使用哪种方法通过了解差异。

本文地址:http://javascript.askforanswer.com/zhijieyuweituo-jquery-on.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!