当选择多个元素时,jQuery“.triggerHandler()”与“.trigger()”

与“.trigger()”不同,jQuery“.triggerHandler()”机制仅对jQuery对象所引用的第一个元素进行操作。 换一种说法,

$('.all-over-the-page').triggerHandler("readjust"); 

只会使用类“all-over-the-page”调用第一个元素的“readjust”处理程序,即使页面上有许多具有该类的元素。 另一方面,“。turigger()”方法会影响所有这些方法。

我意识到我可以使用“.each()”来解决这个问题(或者只是编写我自己的替代品来为我做这件事),但是为什么两者在这方面有所不同呢? 这对我来说没有意义。 (我当然明白,现在几乎肯定无法改变。)

编辑澄清:

如果我提供一个我实际得到的代码风格的上下文,可能更容易理解为什么我会忽略这一点。 当我在页面上放置各种“小部件”function的代码时,通常涉及事件处理程序。 一个很好的例子是某种forms,它有一些字段,其相关性由复选框,单选按钮或选择器控制。 一个常见的例子是“送货地址”复选框,显示在数十亿电子商务网站上:如果选中该复选框,则会禁用送货地址并使用开票地址。

现在考虑一些其他代码,由于其自​​身原因完全独立于checkbox-control小部件,实际上可以对表单执行操作,可能包括以编程方式更新复选框设置。 在这种情况下,其他窗口小部件代码可能希望使用“triggerHandler()”来告诉任何窗口小部件,“嘿,我已经更新了一些内容,因此您可能需要重新检查当前状态并在必要时进行调整。”

因此,如果“.triggerHandler()”将对所有选定的元素进行操作,我可以使用:

  $theForm.find('input, select, textarea').triggerHandler('change'); 

所有这些处理程序都可以运行并执行他们需要的任何操作。 正如我所说,写起来很容易:

  $theForm.find('input, select, textarea').each(function() { $(this).triggerHandler('change'); }); 

“……对于这两方面在这方面有何不同,有什么理由吗?”

我认为这个想法是, triggerHandler()是一种调用你作为处理程序的函数的方式,就好像它是任何其他函数一样。

因此,他们创建了triggerHandler()这样函数只被调用一次,它返回函数的实际返回值,并且它不会影响具有冒泡或默认行为的DOM。

当然,如果this值更改为DOM元素以外的其他值,函数可能会中断,因此它们只使用匹配的第一个元素。

如果你想简单地使用你的函数,那么我可能只是保留对它的引用并直接调用它,或者作为.each()的参数。

 $('.element').each( handler_func ); 

…只要你不需要event对象。


编辑:或者如果您想要从调用返回的值,请使用.map()代替:

 var return_values = $('.element').map( handler_func ); 

编辑:关于更新的问题中提供的示例,一个好的解决方案可能是利用trigger() [docs]方法的extraParametersfunction,以便您可以告诉处理程序preventDefault()stopPropagation()

 $('.elememts').bind( 'click', function( e, was_code_triggered ) { if( was_code_triggered ) { e.preventDefault(); e.stopPropagation(); } // your code }); // ... $('.elememts').trigger( 'click', true ); // pass "true" to let handler know // it wasn't a DOM event 

来自.trigger()文档:

“注意我们在这里传递的额外参数与.bind()方法的eventData参数之间的区别。两者都是将信息传递给事件处理程序的机制,但.trigger()的extraParameters参数允许确定信息在事件被触发时 ,而.bind()的eventData参数要求在绑定处理程序时已经计算了信息。“