jQuery" .triggerHandler（）" vs.“.trigger（）”选择多个元素时 [英] jQuery ".triggerHandler()" vs. ".trigger()" when multiple elements are selected

问题描述

与.trigger（）不同，jQuery.triggerHandler（）机制仅对jQuery对象所引用的第一个元素进行操作。换句话说，

The jQuery ".triggerHandler()" mechanism, unlike ".trigger()", only operates on the first element referenced by the jQuery object for which it's called. In other words,

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

只会调用第一个元素的readjust处理程序class-all-over-页面，即使页面上有许多元素与该类。另一方面，.trigger（）方法会影响所有这些方法。

will only call the "readjust" handler for the first element with class "all-over-the-page", even if there are many elements on the page with that class. The ".trigger()" method, on the other hand, would affect all of them.

我意识到我可以使用.each（）来绕过这个（或者只是写我自己的替代品，为我做这个），但是有没有理由说明为什么两者在这方面有所不同？这对我来说没什么意义。 （我当然理解现在几乎肯定无法改变。）

I realize that I can use ".each()" to get around this (or simply write my own substitute that does that for me), but is there some rationale for why the two are different in this respect? It kind-of makes no sense to me. (I understand of course that it almost certainly can't be changed now.)

编辑以澄清：

如果我提供一个我实际得到的代码风格的上下文，那么我可能更容易理解为什么我会对此嗤之以鼻。当我在页面上为各种小部件功能组合代码时，通常涉及事件处理程序。一个很好的例子是某种形式，它有一些字段，其相关性由复选框，单选按钮或选择器控制。一个常见的例子是送货地址复选框，显示在数十亿电子商务网站上：如果选中该复选框，则会禁用送货地址并使用帐单邮寄地址。

It's probably easier to understand why I'm scratching my head over this if I provide a context in the style of code I've actually got. When I put together code for various "widget" features on a page, that often involves event handlers. A good example is a form of some sort that's got some fields whose relevance is controlled by a checkbox, or radio button, or selector. A common instance of that is the "Shipping Address" checkbox that shows up on a zillion e-commerce sites: if the checkbox is checked, the shipping address is disabled and the billing address is used.

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

Now consider that some other code may, for its own reasons that are totally independent of the checkbox-control widget, actually do things to the form that may include updating checkbox settings programmatically. In that case, that other widget code may want to use "triggerHandler()" to tell any widgets, "hey I've updated some stuff, so you might want to re-check the current status and adjust if necessary."

因此，如果.triggerHandler（）对所有选定的元素都有效，我可以使用：

Thus, if ".triggerHandler()" would operate on all selected elements, I could use:

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

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

and all those handlers could run and do whatever they need. As I said, it's easy enough to write:

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

推荐答案

......为什么两者在这方面有所不同，有一些理由吗？

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

I think the idea is that triggerHandler() is meant to be a way of invoking the function you as a handler as though it was any other function.

因此，他们使 triggerHandler（）使得该函数只被调用一次，它返回函数的实际返回值，并且它不会影响具有冒泡或默认行为的DOM。

As such, they made triggerHandler() so that the function is only invoked once, it returns the actual return value of the function, and it doesn't affect the DOM with bubbling or default behaviors.

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

Of course the function may break if they changed the this value to something other than a DOM element, so they just use the first element matched.

如果你想简单地使用你的函数，那么我可能只是保留一个参考它直接调用它，或作为 .each（）的参数。

If you're wanting to simply use your function, then I'd probably just keep a reference to it and invoke it directly, or as the argument to .each().

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

...只要您不需要事件 object。

...as long as you don't need the event object.

编辑：或者如果你想要返回的值调用，改为使用 .map（）：

Or if you want the values returned from the invocation, use .map() instead:

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

---

编辑：随着尊重更新问题中提供的示例，一个好的解决方案可能是利用 extraParameters 功能=noreferrer> 触发器（） ^[docs] 方法，以便您可以告诉处理程序到 preventDefault（）和 stopPropagation（）。

---

With respect to the example provided in the updated question, a good solution may be to take advantage of the extraParameters capability of the trigger()^[docs] method so that you can tell the handler to preventDefault() and 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（） docs：

From the .trigger() docs:

注意我们在这里传递的额外参数和eventData参数之间的区别是 .bind（）方法。两者都是将信息传递给事件处理程序的机制，但 .trigger（）的extraParameters参数允许在触发事件时确定信息，而将eventData参数设置为 .bind（）要求在处理程序绑定时已经计算出信息。

"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."

这篇关于jQuery" .triggerHandler（）" vs.“.trigger（）”选择多个元素时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！