jQuery.trigger() 函数详解

JavaScriptjquery2017年1月2日

trigger()函数用于在每个匹配元素上触发指定类型的事件。

此外，你还可以在触发事件时为事件处理函数传入额外的参数。

使用该函数可以手动触发执行元素上绑定的事件处理函数，也会触发执行该元素的默认行为。

以表单元素<form>为例，使用trigger("submit")可以触发该表单绑定的submit事件，也会执行表单submit事件的默认行为——表单提交操作。

根据网友 @飞扬的反馈，链接标签<a>的trigger("click")是一个特例，不会触发链接click事件的默认行为——跳转到对应链接的操作，点此查看相关详情。

从jQuery 1.3开始，trigger()函数触发的事件还支持事件冒泡，可以冒泡传递到DOM树上。

该函数属于jQuery对象(实例)。

语法

trigger()函数主要有以下两种形式的用法：

用法一：

jQueryObject.trigger( events [, extraArguments ] )

在每个匹配元素上触发指定类型(events)的事件，并可为事件处理函数传入额外的参数(extraArguments)。

用法二：jQuery 1.3 新增支持该用法。

jQueryObject.trigger( eventObject [, extraArguments ] )

为指定事件处理函数传入的Event对象(eventObject)，用于触发执行对应的事件处理函数，并可为事件处理函数传入额外的参数(extraArguments)。

参数

参数	描述
events	String类型指定的事件类型和可选的命名空间，例如"click"、 "focus"、 "keydown.myPlugin"。
extraArguments	可选/Object类型为事件处理函数传入的额外参数。如果要传入多个参数，请以数组方式传入。
eventObject	Object类型一个Event对象，用于触发传入该对象的事件处理函数。

trigger()函数会为触发执行的事件处理函数传入一个默认参数，也就是表示当前事件的Event对象。

参数extraArguments用于为事件处理函数传入更多额外的参数。如果extraArguments是数组形式，则每个元素都将充当函数的参数。

返回值

trigger()函数的返回值为jQuery类型，返回当前jQuery对象本身。

示例&说明

请参考下面这段初始HTML代码：

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>

首先，我们为上述button和<a>元素绑定事件，然后使用trigger()函数直接触发事件，相应的代码如下：

var $log = $("#log");

function handler( event, arg1, arg2 ){
    var html = '<br>触发元素#' + this.id + '的[' + event.type +']事件，额外的函数参数为:' + arg1 + ', ' + arg2;
    $log.append( html );
}

var $buttons = $(":button");

// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );

// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );


// 触发所有button的click事件
$buttons.trigger("click"); 
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
触发元素#btn2的[click]事件，额外的函数参数为:undefined, undefined
*/


$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:CodePlayer, undefined
*/

// arg1 = "张三"， arg2 = 20
$("a").trigger("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
*/


$("a").trigger("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
*/

运行代码(以下代码请自行复制到演示页面运行)

trigger()函数还可以根据传入事件处理函数的Event对象，来触发对应的事件。

var $btn1 = $("#btn1");

// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click", function(event){
    alert("click1");    
});

// 为btn1元素的click事件绑定事件处理函数
// 如果传入了一个有效的额外参数，则再次触发click
$btn1.bind( "click", function(event, arg1){
    alert("click2");
    if(arg1)
        $(this).trigger( event );
});

// $btn1.trigger( "click" ); // 调用一次click1、调用一次click2

$btn1.trigger( "click", true ); // 调用两次click1、调用两次click2

此外，trigger()函数还可以只触发包含指定定命名空间的事件(1.4.3+才支持命名空间)。

function A( event ){
    alert( 'A' );
}
function B( event ){
    alert( 'B' );
}
function C( event ){
    alert( 'C' );
}

var $btn1 = $("#btn1");

// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click.foo.bar", A );
$btn1.bind( "click.test.foo", B );
$btn1.bind( "click.test", C );


// 触发btn1的click事件，不限定命名空间
$btn1.trigger("click"); // 触发A、B、C

// 触发btn1的包含命名空间foo的click事件
$btn1.trigger("click.foo"); // 触发A、B

// 触发btn1的包含命名空间test的click事件
$btn1.trigger("click.test"); // 触发B、C

// 触发btn1的同时包含命名空间foo和test的click事件
$btn1.trigger("click.foo.test"); // 触发B

trigger()的理解----为什么要用trigger()方法

trigger() 触发事件

触发事件就是类似于点击click, mouseover, keydown 等有动作的js事件，简单的说就是一个动作，可能有人会问，那show, hide 是不是? 不是

为什么要用 trigger() ？

比如：你给一个按钮添加了一个click点击事件，弹出提示框，代码如下。

var div = $("#mybutton"); 
//你的按钮。 
div.click(function() {
 alert('你是猪啊，~让你点，你就点？');
});

上面的代码就是一个按钮的click事件。这个时候你有个非分的要求，就是希望页面刷新的时候就点一下这个按钮。如果不用trigger()你可以在后面这样写：

div.click();

如果用trigger()，你就要写成这样：效果跟上面这句是一样，就是稍微长点。

div.trigger("click");

然后有人说：你是猪啊·~~ 上面这个短一点，你还教我用下面这个 =，=表急着揍我么~· 继续往下看。

你用手册里的索引搜一下click 可以看到两条结果 click() 和，click(fn)，然后搜一下trigger 发现只有一个 trigger(type, [data]) 。

然后你知道我的意思了吧。— trigger 可以传参数进去。

我们看看手册里的trigger 例子：

$("p").click( function (event, a, b) 
 { 
// 一个普通的点击事件时，a和b是undefined类型 
// 如果用下面的语句触发，那么a指向”foo”,而b指向”bar” 
} ).trigger("click", ["foo", "bar"]);

了解了吧？如果用click 的话，它不吃参数，用trigger的话，就能吃了。
练习一下吧：黏贴到你的页面上试试看，记得把jquery载进来。

$(function() { var div = $("#mybutton");
 //你的按钮。
 div.click(function(e,text) {
 var text = text || '你是猪啊，~让你点，你就点？';
 alert(text); });
 div.trigger("click","您好，请点击按钮");
});

demo：

下面的代码可以显示一个”Hello World” jQuery 代码:

$("p").bind("myEvent", function (event, message1, message2) {
 alert(message1 + ' ' + message2);
 });
 $("p").trigger("myEvent", ["Hello","World!"]);

其实trigger()方法的意思自动触发被选元素的指定事件类型。