Question

出于好奇 - jQuery的triggerHandler /用例的目的是什么？据我所知，trigger和triggerHandler之间唯一的“真正”区别在于本机事件是否触发，以及事件冒泡行为（尽管triggerHandler的冒泡行为不存在似乎很难用trigger复制几行代码。确保本机事件不会触发有什么好处？

我很好奇这是否是一个便利功能，或者存在更深层次的原因，以及我何时/何时使用它。

Answer 1

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

.triggerHandler（）方法的行为   类似于.trigger（），与   以下例外：


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

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

之类的内容

虽然.trigger（）将对jQuery匹配的所有元素进行操作   object，.triggerHandler（）只影响   第一个匹配的元素。

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

使用.triggerHandler（）创建的事件不会冒泡   DOM层次结构;如果他们没有处理   由目标元素直接，他们   什么都不做。

防止繁殖，不必解释这个......

而不是返回jQuery对象（允许链接），   .triggerHandler（）返回任何内容   值由最后一个处理程序返回   它导致被执行。如果不   处理程序被触发，它返回   未定义

这个也应该是自我解释的......

Answer 2

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

你有动作绑定到'焦点'事件，但你不希望浏览器专注于真正关注它（可能看起来很愚蠢，但它可能发生，不是吗？就像你想要的代码一样执行一次而不会失去当前的焦点。）
您正在制作的组件想要触发其中的另一个组件的“加载”（只是一个通用事物的示例）。

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

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

在这种情况下，你必须调用triggerHandler（）。

Answer 3

差异1： 您可以使用触发器调用JQuery对象匹配的所有元素。

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

<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");
});

//用triggerHandler替换触发器以查看差异

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

差异2：对元素事件使用triggerHandler（）时，不会为该元素调用本机事件。 trigger（）可以正常工作。

//示例：

//用triggerHandler替换触发器以查看差异

 <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");

});

差异3： trigger（）返回Jquery对象，而triggerHandler（）返回最后一个句柄值，或者如果没有触发处理程序，则返回undefined

//示例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;
});

其他不同之处是

使用triggerHandler（）触发的事件不会冒泡DOM层次结构;如果它们没有直接由目标元素处理，它们什么都不做。

Answer 4

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

因此，对于处理程序如：

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

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

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

如果你想回复处理程序返回的结果，你可以使用'triggerHandler'。

触发器在jQuery中触发器与触发器

4 个答案: