jQuery 提供了一种方法,可以通过 .trigger() 方法触发绑定到元素的事件处理程序,而无需任何用户交互。
link 可以触发哪些处理程序?jQuery 的事件处理系统是基于原生浏览器事件的一层。当使用 .on( "click", function() {...} ) 添加事件处理程序时,可以使用 jQuery 的 .trigger( "click" ) 触发它,因为 jQuery 在最初添加该处理程序时会存储对该处理程序的引用。此外,它将触发 onclick 属性内的 JavaScript。.trigger() 函数不能用于模拟原生浏览器事件,例如单击文件输入框或锚点标记。这是因为,没有使用 jQuery 的事件系统附加与这些事件相对应的事件处理程序。
1
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() 之间有四个区别
.triggerHandler() 仅触发 jQuery 对象的第一个元素上的事件。
.triggerHandler() 无法链接。它返回最后一个处理程序返回的值,而不是 jQuery 对象。
.triggerHandler() 不会导致事件的默认行为(例如表单提交)。
由 .triggerHandler() 触发的事件不会冒泡到 DOM 层次结构。只有单个元素上的处理程序才会触发。
有关更多信息,请参阅 triggerHandler 文档
链接 不要仅仅为了执行特定函数而使用 .trigger()虽然此方法有其用途,但它不应仅用于调用作为单击处理程序绑定的函数。相反,您应该将要调用的函数存储在变量中,并在执行绑定时传递变量名。然后,您可以随时调用函数本身,而无需 .trigger()。
1
2
3
4
5
6
7
8
9
10
11
12
// Triggering an event handler the right wayvar 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() 可用于通知代码的其他部分应用程序特定事件已发生。