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

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

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

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层次结构; 如果它们不是直接由目标元素处理的，它们什么都不做。

防止传播，hopyfully不必解释这个…

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

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

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

 button1 button2 button3 $("#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替换触发器以查看差异

  button1 button2 $("#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

 Button1 Button2 Button3 $("#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”。