jQuery - 触发事件处理函数

jQuery 通过 .trigger() 方法来触发元素的事件处理函数，而不用点击该元素。

什么样的事件处理函数可以被 trigger()

jQuery 事件处理系统，是处于本地浏览器事件之上的一层。因为 jQuery 在事件处理函数加入时会储存该函数的参考，所以当使用 .on("click", function(){......}) 添加事件处理函数，就可以使用 jQuery 的 .trigger("click") 触发事件处理函数。但是 .trigger() 方法不能用来模拟触发本地浏览器事件，例如 <input> <a> ，因为没有使用 jQuery 事件系统来附加与之对应的事件处理函数。

<a href="http://learn.jquery.com">Learn jQuery</a>

// 不会改变当前页面
$( "a" ).trigger( "click" );

如何模拟本地浏览器事件

IE9 之前的浏览器，通过 document.createEventObject 触发本地浏览器事件；其余的浏览器类型，通过 document.createEvent 触发本地浏览器事件。

jquery.simulate.js jQuery UI 在进行自动化测试时，使用这种方式来触发本地浏览器事件。

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

.trigger() VS .triggerHandler()

1. .triggerHandler() 只触发 jQuery 对象中第一个元素的事件。
2. .triggerHandler() 不能被串联。它返回最后一个处理函数返回的值，而不是 jQuery 对象。
3. .triggerHandler() 不会引起该事件对应的默认行为。
4. 通过 .triggerHandler() 触发的事件，不会冒泡整个文档架构的事件传递，只会触发该对应元素的事件。

更多详情参考：triggerHandler documentation

不要使用 .trigger() 简单的执行特定的函数

// 触发事件处理函数的正确方式
var foo = function( event ) {
    if ( event ) {
        console.log( event );
    } else {
        console.log( "this didn't come from an event!" );
    }
};
 
$( "p" ).on( "click", foo );
 
foo(); // 代替 $( "p" ).trigger( "click" )