triggerHandler 与 jQuery 中的触发器

triggerHandler vs. trigger in jQuery

提问by David Eads

Out of curiosity -- what is the purpose of / use cases for jQuery's triggerHandler? As far as I can tell, the only "real" differences between triggerand triggerHandleris whether or not the native event fires, and event bubbling behavior (though triggerHandler's bubbling behavior doesn't seem hard to replicate with triggerin a few more lines of code). What is the advantage to ensuring the native event does not fire?

出于好奇——jQuery 的 / 用例的目的是什么triggerHandler？据我所知道的，唯一的“真实”之间的差异trigger，并triggerHandler为本地事件触发与否，和事件冒泡行为（虽然triggerHandler的冒泡的行为似乎并不很难用复制trigger的代码几行） . 确保本地事件不会触发有什么好处？

I'm curious if this is a convenience function or there's a deeper reason it exists, and what why/when I would use it.

我很好奇这是一个方便的功能还是存在更深层次的原因，以及我为什么/何时使用它。

回答by Robert

From the Docs at http://api.jquery.com/triggerHandler/

来自http://api.jquery.com/triggerHandler/的文档

The .triggerHandler() method behaves similarly to .trigger(), with the following exceptions:

• The .triggerHandler() method does not cause the default behavior of an event to occur (such as a form submission).

.triggerHandler() 方法的行为与 .trigger() 类似，但有以下例外：

• .triggerHandler() 方法不会导致发生事件的默认行为（例如表单提交）。

Not preventing the default browser actions allow you to specify an action that occurs on focus or select, etc etc etc, that applies a style. Maybe you have a dynamic menu that is Javascript based, so you don't want to apply the style purely with CSS otherwise those with Javascript disabled won't understand why the layout looks odd. You can use something like $('menu1select').triggerHandler('click');

不阻止默认浏览器操作允许您指定应用样式的焦点或选择等发生的操作。也许你有一个基于 Javascript 的动态菜单，所以你不想纯粹用 CSS 应用样式，否则那些禁用 Javascript 的人将不明白为什么布局看起来很奇怪。你可以使用类似的东西$('menu1select').triggerHandler('click');

• While .trigger() will operate on all elements matched by the jQuery object, .triggerHandler() only affects the first matched element.

• 虽然 .trigger() 将对 jQuery 对象匹配的所有元素进行操作，但 .triggerHandler() 仅影响第一个匹配的元素。

If you have an event which hides an element onclick for example, and you want to call that function generally, instead of having to specify each element, you can use $('.menu').triggerHandler('click');

例如，如果您有一个隐藏元素 onclick 的事件，并且您希望通常调用该函数，而不必指定每个元素，则可以使用$('.menu').triggerHandler('click');

• Events created with .triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.

• 使用 .triggerHandler() 创建的事件不会在 DOM 层次结构中冒泡；如果它们不是由目标元素直接处理，则它们什么都不做。

Prevents propagation, hopyfully don't have to explain this one...

防止传播，希望不必解释这个......

• Instead of returning the jQuery object (to allow chaining), .triggerHandler() returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns undefined

• .triggerHandler() 不是返回 jQuery 对象（以允许链接），而是返回它导致执行的最后一个处理程序返回的任何值。如果没有触发处理程序，则返回 undefined

This one should be self explanatory as well...

这也应该是不言自明的......

回答by Mica?l Félix

What is the advantage to ensuring the native event does not fire?

确保本地事件不会触发有什么好处？

• You have actions bound to a 'focus' event but you don't want the browser to focus really focus it (might seem dumb but it could happen, couldn't it? like a code that you would like to execute once without losing the current focus).

• A component that you are making want to trigger 'load' (just an example of a generic thing) of another component that is inside it.

  In that case, if you are calling 'load' of children when 'load' of the parent comes, you don't want to do this because it would cause an infinite call if the event.stopPropagation isn't called by the listeners of 'load' event (caused by bubling):

• 您的操作绑定到“焦点”事件，但您不希望浏览器真正聚焦它（可能看起来很愚蠢，但它可能会发生，不是吗？就像您希望执行一次而不会丢失当前焦点）。

• 您正在制作的组件想要触发它内部的另一个组件的“加载”（只是一个通用事物的示例）。

  在这种情况下，如果您在父项的“加载”到来时调用子项的“加载”，则您不想这样做，因为如果 event.stopPropagation 的侦听器未调用它，则会导致无限调用'load' 事件（由冒泡引起）：

$container.on('load', function () {
    $somethingInsideContainer.trigger('load'); 
    // Would cause a loop if no event.stopPropagation() is called
});

$container.on('load', function () {
    $somethingInsideContainer.trigger('load'); 
    // Would cause a loop if no event.stopPropagation() is called
});

In that case you have to call triggerHandler().

在这种情况下，您必须调用 triggerHandler()。

回答by maxspan

Difference 1:you can call all elements matched by the JQuery object using trigger.

区别一：可以使用trigger调用JQuery对象匹配的所有元素。

//Example1 for trigger. All 3 button click events are fired when used trigger. //Try Replacing trigger method with triggerHandler(). You will see only the first button element event handler will fire .

//触发器的示例1。使用触发器时会触发所有 3 个按钮单击事件。//尝试用triggerHandler()替换trigger方法。您将看到只有第一个按钮元素事件处理程序会触发。

<button id = "button1">button1</button>
<button id = "button2">button2</button>
<button id = "button3">button3</button>

$("#button1").on("click", function(){
alert("button1 clicked");
});
$("#button2").on("click", function(){
alert("button2 clicked");
});
$("#button3").on("click", function(){
alert("button3 clicked");
});

//substitute trigger with triggerHandler to see the difference

//用triggerHandler替换trigger看看区别

$("#button1, #button2, #button3").trigger("click");

Difference 2:when using triggerHandler() for an element event, the native event will not be called for that element. trigger() will work fine.

区别2：当对元素事件使用triggerHandler()时，不会为该元素调用原生事件。trigger() 会正常工作。

//Example:

//例子：

//substitute trigger with triggerHandler to see the difference

//用triggerHandler替换trigger看看区别

 <button id = "button1">button1</button>
  <button id = "button2">button2</button>

$("#button1").on("click", function(){
 $("#button2").trigger('click');

});

$("#button3").on("click", function(){
var value = $("#button2").triggerHandler('click');
    alert('my value:'+ value)
});

$("#button2").on('click', function(){
alert("button2 clicked");

});

Difference 3:trigger() return Jquery object whereas triggerHandler() return the last handle value or If no handlers are triggered, it returns undefined

区别 3：trigger() 返回 Jquery 对象，而 triggerHandler() 返回最后一个句柄值或如果没有触发处理程序，则返回 undefined

//Example3

//例3

<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>


$("#button1").on("click", function(){
var myValue = $("#button2").trigger('click');
    alert(myValue);
});

$("#button3").on("click", function(){
var value = $("#button2").triggerHandler('click');
    alert('my value:'+ value)
});

$("#button2").on('click', function(){
alert("button2 clicked");
    return true;
});

Other difference is

其他区别是

Events triggered with triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.

使用 triggerHandler() 触发的事件不会在 DOM 层次结构中冒泡；如果它们不是由目标元素直接处理，则它们什么都不做。

回答by Steve Roberts

For me the main difference is that 'triggerHandler' returns whatever was returned by the last handler, whereas 'trigger' returns the jQuery object.

对我来说，主要区别在于 'triggerHandler' 返回最后一个处理程序返回的任何内容，而 'trigger' 返回 jQuery 对象。

So, for a handler such as:

因此，对于诸如以下处理程序：

  $( document ).on( 'testevent', function ()
  {
    return false;
  });

Using 'triggerHandler' you can do the following:

使用 'triggerHandler' 您可以执行以下操作：

  if( $( document ).triggerHandler( 'testevent' ) === false )
  {
    return;
  }

So you would use 'triggerHandler' if you wanted to respond to the result returned from the handler.

因此，如果您想响应处理程序返回的结果，您将使用 'triggerHandler'。