最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jQuery.trigger()函数使用教程

来源:动视网 责编:小采 时间:2020-11-27 20:18:44
文档

jQuery.trigger()函数使用教程

jQuery.trigger()函数使用教程:trigger()函数用于在每个匹配元素上触发指定类型的事件。此外,你还可以在触发事件时为事件处理函数传入额外的参数。使用该函数可以手动触发执行元素上绑定的事件处理函数,也会触发执行该元素的默认行为。以表单元素<form>为例,使用trigger(
推荐度:
导读jQuery.trigger()函数使用教程:trigger()函数用于在每个匹配元素上触发指定类型的事件。此外,你还可以在触发事件时为事件处理函数传入额外的参数。使用该函数可以手动触发执行元素上绑定的事件处理函数,也会触发执行该元素的默认行为。以表单元素<form>为例,使用trigger(


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

文档

jQuery.trigger()函数使用教程

jQuery.trigger()函数使用教程:trigger()函数用于在每个匹配元素上触发指定类型的事件。此外,你还可以在触发事件时为事件处理函数传入额外的参数。使用该函数可以手动触发执行元素上绑定的事件处理函数,也会触发执行该元素的默认行为。以表单元素<form>为例,使用trigger(
推荐度:
标签: 方法 用法 说明
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top