html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

jQuery中值得注意的trigger方法浅析_jquery_

[ ] 已经帮助:人解决问题

介绍Zb6HTML5中文学习网 - HTML5先行者学习网

trigger方法的功能是在所选择的元素上触发指定类型的事件,其调用的语法格式为:trigger(type,[data]) ,其中参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附件参数.Zb6HTML5中文学习网 - HTML5先行者学习网
Zb6HTML5中文学习网 - HTML5先行者学习网

常用模拟Zb6HTML5中文学习网 - HTML5先行者学习网
Zb6HTML5中文学习网 - HTML5先行者学习网

有时,不需要进行操作,也想模拟用户操作达到某些效果。比如在用户进入界面后就触发click事件,而不需要用户去点击。Zb6HTML5中文学习网 - HTML5先行者学习网
在jquery中可以使用trigger完成。Zb6HTML5中文学习网 - HTML5先行者学习网

$("#btn").trigger("click")//触发id为btn的click事件$("#btn").click()//简写

触发自定义事件Zb6HTML5中文学习网 - HTML5先行者学习网
Zb6HTML5中文学习网 - HTML5先行者学习网

trigger不仅能触发浏览器支持的这些事件,也可以触发自定义的事件。比如,绑定一个名为clickMe的事件:Zb6HTML5中文学习网 - HTML5先行者学习网

$("#btn").bind("clickMe",function(){ //....})$("#btn").trigger("clickMe")//触发该事件

传递数据Zb6HTML5中文学习网 - HTML5先行者学习网
Zb6HTML5中文学习网 - HTML5先行者学习网

trigger(type,[data])

第一个参数指触发的事件类型,第二个是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次的事件是否为用户触发的。Zb6HTML5中文学习网 - HTML5先行者学习网

 <button id="btn">按钮</button> <p id="msg"></p> <script> $(function(){  $('#btn').bind("clickMe",function(event,msg1,msg2){  $("#msg").text(msg1+' '+msg2)  })  $('#btn').trigger("clickMe",["hello","jquery"]) }) </script>

Zb6HTML5中文学习网 - HTML5先行者学习网

效果截图Zb6HTML5中文学习网 - HTML5先行者学习网
Zb6HTML5中文学习网 - HTML5先行者学习网

执行默认操作Zb6HTML5中文学习网 - HTML5先行者学习网
Zb6HTML5中文学习网 - HTML5先行者学习网

trigger()方法触发事件后,会执行浏览器默认操作。比如Zb6HTML5中文学习网 - HTML5先行者学习网

$('input').trigger('focus')

以上代码不仅会触发为input绑定的focus事件,也会触发浏览器中默认的focus事件,得到焦点。如果只想触发自定义的focus事件,使用triggerHandler()Zb6HTML5中文学习网 - HTML5先行者学习网

$('input').triggerHandler('focus')

该方法仅仅会触发input上绑定的事件,并且取消浏览器对这个事件的默认操作,不会得到焦点。Zb6HTML5中文学习网 - HTML5先行者学习网

总结Zb6HTML5中文学习网 - HTML5先行者学习网

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。Zb6HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助