返回值:jQuerytrigger(eventType, [extraParameters])
在匹配的元素上,执行指定事件类型的所有的处理函数。
-
1.0 新增trigger(eventType, [extraParameters])
eventType (String) 包含 JavaScript 事件类型的字符串。例如click
或submit
。extraParameters (Object) 可选参数,传到事件处理函数中的额外参数。 -
1.3 新增trigger(event)
event (Event)jQuery.Event
对象。
当指定的事件发生时,任何通过 .bind()
方法或任何简写方法绑定的事件处理函数都会被触发。当然,通过 .trigger()
方法还可以手动调用指定的事件。若用户手动调用 .trigger()
后,处理函数的执行顺序和它们被注册的顺序是一样的:
$('#foo').bind('click', function() { alert($(this).text()); }); $('#foo').trigger('click');
从 jQuery 1.3 开始,.trigger()
执行的事件会在 DOM 树中向上冒泡。若在事件处理函数中返回了 false
或在 event 对象上调用了
.stopPropagation()
方法的话,就可以防止冒泡行为的发生。尽管 .trigger()
模拟了事件的激活,具备合成的 event 对象,但是它并没有完美的复制自然发生的事件(naturally-occurring event)。
若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,请使用
.triggerHandler()
来代替。
当我们使用 .bind()
方法定义了一个自定义事件类型时,.trigger()
的第二个参数就会派上用场。例如,假设我们为元素绑定了一个名叫 custom
的自定义事件,而不是像上面的例子中那样,绑定的是常见的内置的 click
事件:
$('#foo').bind('custom', function(event, param1, param2) { alert(param1 + "\n" + param2); }); $('#foo').trigger('custom', ['Custom', 'Event']);
event 对象始终都是事件处理函数的第一个参数,但是若在调用 .trigger()
时,传入了额外参数的话,这些参数也会被传入到处理函数中。若传入的参数不至一个,可以使用数组,就像上面例子中写到的那样。从 jQuery 1.6.2 开始,只传入单一参数的话,可以不使用数组。
请注意向该方法中传入的 extraParameters
参数与传入到 .bind() 方法中的 eventData
参数的区别。它们的机制都是向事件处理函数中传入信息,但是传入 .trigger()
中的 extraParameters
参数是在事件发生时传入的,而传入到 .bind()
中的 eventData
参数要求在进行事件绑定时就要事先计算好。
.trigger()
方法可以应用在包裹简单 JavaScript 对象的 jQuery 集合中,类似 pub/sub 机制(观察者机制)。当事件发生时,任何绑定在对象上的处理函数都会被触发。
注意: 对于简单对象和 DOM 对象而言,如果被触发的事件名与对象上的属性名相匹配的话,若没有处理函数调用event.preventDefault()
,那么 jQuery 会尝试将其属性值作为方法来调用。如果不希望发生这样的行为,请使用.triggerHandler()
来代替。
示例:
点击 button #2 时,同时触发 button #1 的点击事件。
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:10px; }
div { color:blue; font-weight:bold; }
span { color:red; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
<script>
$("button:first").click(function () {
update($("span:first"));
});
$("button:last").click(function () {
$("button:first").trigger('click');
update($("span:last"));
});
function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}
</script>
</body>
</html>
演示:
示例:
若要提交第一个表单但又不想使用 submit() 函数,请尝试如下方法:
jQuery 代码:
$("form:first").trigger("submit")
示例:
若要提交第一个表单但又不想使用 submit() 函数,请尝试如下方法:
jQuery 代码:
var event = jQuery.Event("submit");
$("form:first").trigger(event);
if ( event.isDefaultPrevented() ) {
// Perform an action...
}
示例:
向事件中传入任意的数据:
jQuery 代码:
$("p").click( function (event, a, b) {
// when a normal click fires, a and b are undefined
// for a trigger like below a refers to "foo" and b refers to "bar"
} ).trigger("click", ["foo", "bar"]);
示例:
通过 event 对象,向事件中传入任意的数据:
jQuery 代码:
var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);
示例:
另外一种通过 event 对象传入数据的方法:
jQuery 代码:
$("body").trigger({
type:"logged",
user:"foo",
pass:"bar"
});