jquery - triggerHandler 与 jQuery 中的触发器

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 对象匹配的所有元素进行操作，但 .triggerHandler() 只影响第一个匹配的元素。

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

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

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

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

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

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

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

//Example1 用于触发器。使用触发器时会触发所有 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代替trigger看看区别

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

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

//例子：

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

});

区别 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'。