javascript - 选择多个元素时，jQuery ".triggerHandler()"与 ".trigger()"

Question

jQuery“.triggerHandler()”机制与“.trigger()”不同，它只对调用它的 jQuery 对象引用的第一个元素进行操作。换句话说，

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

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

我意识到我可以使用“.each()”来解决这个问题(或者简单地编写我自己的替代品来为我做这件事)，但是是否有一些理由可以解释为什么两者在这方面不同？这对我来说毫无意义。 (我当然明白，现在几乎肯定不能更改。)

编辑以澄清:

如果我以我实际获得的代码风格提供上下文，可能会更容易理解我为何为此绞尽脑汁。当我在一个页面上将各种“小部件”功能的代码放在一起时，通常会涉及到事件处理程序。一个很好的例子是某种形式，它有一些字段，其相关性由复选框、单选按钮或选择器控制。一个常见的例子是出现在无数电子商务网站上的“送货地址”复选框:如果选中该复选框，送货地址将被禁用并使用账单地址。

现在考虑一些其他代码，由于其自​​身的原因，完全独立于复选框控件小部件，实际上可以对表单执行某些操作，包括以编程方式更新复选框设置。在这种情况下，其他小部件代码可能想要使用“triggerHandler()”来告诉任何小部件，“嘿，我已经更新了一些东西，所以你可能想要重新检查当前状态并在必要时进行调整。”

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

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

所有这些处理程序都可以运行并做他们需要的任何事情。正如我所说，编写起来很容易:

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

Answer 1

"...is there some rationale for why the two are different in this respect?"

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

因此，他们制作了 triggerHandler() 以便该函数仅被调用一次，它返回函数的实际返回值，并且不会通过冒泡或默认行为影响 DOM .

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

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

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

...只要您不需要事件对象。

---

编辑:或者如果您想要调用返回的值，请改用 .map():

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

---

编辑:关于更新问题中提供的示例，一个好的解决方案可能是利用 trigger()^[docs] 的extraParameters 功能方法，以便您可以告诉处理程序 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() 文档:

"Note the difference between the extra parameters we're passing here and the eventData parameter to the .bind() method. Both are mechanisms for passing information to an event handler, but the extraParameters argument to .trigger() allows information to be determined at the time the event is triggered, while the eventData argument to .bind() requires the information to be already computed at the time the handler is bound."