发布在：事件

触发事件处理程序

jQuery 提供了一种方法，可以通过 .trigger() 方法触发绑定到元素的事件处理程序，而无需任何用户交互。

link 可以触发哪些处理程序？

jQuery 的事件处理系统是基于原生浏览器事件的一层。当使用 .on( "click", function() {...} ) 添加事件处理程序时，可以使用 jQuery 的 .trigger( "click" ) 触发它，因为 jQuery 在最初添加该处理程序时会存储对该处理程序的引用。此外，它将触发 onclick 属性内的 JavaScript。.trigger() 函数不能用于模拟原生浏览器事件，例如单击文件输入框或锚点标记。这是因为，没有使用 jQuery 的事件系统附加与这些事件相对应的事件处理程序。

1
 
<a href="https://learn.jqueryjs.cn">Learn jQuery</a>
1
2
 
// This will not change the current page
$( "a" ).trigger( "click" );

link 如果不是 .trigger()，如何模拟原生浏览器事件？

为了触发原生浏览器事件，必须对 < IE9 使用 document.createEventObject，对所有其他浏览器使用 document.createEvent。使用这两个 API，可以以编程方式创建一个事件，其行为完全就像有人实际单击了文件输入框一样。将执行默认操作，并且将显示浏览文件对话框。

jQuery UI 团队创建了 jquery.simulate.js，以便简化触发原生浏览器事件以用于其自动化测试。它的用法模仿 jQuery 的触发器。

1
2
 
// Triggering a native browser event using the simulate plugin
$( "a" ).simulate( "click" );

这不仅会触发 jQuery 事件处理程序，还会跟随链接并更改当前页面。

link .trigger() 与 .triggerHandler()

.trigger() 和 .triggerHandler() 之间有四个区别

  1. .triggerHandler() 仅触发 jQuery 对象的第一个元素上的事件。
  2. .triggerHandler() 无法链接。它返回最后一个处理程序返回的值，而不是 jQuery 对象。
  3. .triggerHandler() 不会导致事件的默认行为（例如表单提交）。
  4. 由 .triggerHandler() 触发的事件不会冒泡到 DOM 层次结构。只有单个元素上的处理程序才会触发。

有关更多信息，请参阅 triggerHandler 文档

链接 不要仅仅为了执行特定函数而使用 .trigger()

虽然此方法有其用途，但它不应仅用于调用作为单击处理程序绑定的函数。相反，您应该将要调用的函数存储在变量中，并在执行绑定时传递变量名。然后，您可以随时调用函数本身，而无需 .trigger()。

1
2
3
4
5
6
7
8
9
10
11
12
 
// Triggering an event handler the right way
var foo = function( event ) {
    if ( event ) {
        console.log( event );
    } else {
        console.log( "this didn't come from an event!" );
    }
};
 
$( "p" ).on( "click", foo );
 
foo(); // instead of $( "p" ).trigger( "click" )

可以使用 发布-订阅模式 使用 jQuery 插件 在触发器之上构建更复杂的架构。使用此技术，.trigger() 可用于通知代码的其他部分应用程序特定事件已发生。