jquery 中的trigge函数详解
来源:互联网 发布:mac打不开word文档 编辑:程序博客网 时间:2024/05/22 16:39
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
)。
参数
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 中的trigge函数详解
- jquery中的$.ajax函数详解
- jQuery jQuery() 函数详解
- 【jquery】jQuery.extend 函数详解
- [jQuery] jQuery.extend 函数详解
- jquery--jQuery.extend 函数详解
- jQuery核心函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- JQuery 常用函数详解
- jQuery.extend 函数详解
- SQL 基于列的逻辑表达式 (CASE)
- 【Laravel】 常用的artisan命令【原创】
- git使用错误总结1
- LINQ(LINQ to Entities)
- php/thinkphp使用PHPExcel解析表格数据,生成表格案例
- jquery 中的trigge函数详解
- 实现微信公众号“一键关注”功能?
- 微信授权登录
- vxworks中断初始化以及挂接分析
- Smarty3 视频笔记
- Windows to Windows SSH登录
- git reset revert rebase 区别
- 银行业法律法规与综合能力-- 知识点总结
- 100base-fx 单模/多模接口是什么意思