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


Posted in Javascript onDecember 12, 2016

介绍

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

常用模拟

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

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

$("#btn").click()//简写

触发自定义事件

trigger不仅能触发浏览器支持的这些事件,也可以触发自定义的事件。比如,绑定一个名为clickMe的事件:

$("#btn").bind("clickMe",function(){
 //....
})

$("#btn").trigger("clickMe")//触发该事件

传递数据

trigger(type,[data])

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

<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>

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

效果截图

执行默认操作

trigger()方法触发事件后,会执行浏览器默认操作。比如

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

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

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

该方法仅仅会触发input上绑定的事件,并且取消浏览器对这个事件的默认操作,不会得到焦点。

总结

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

Javascript 相关文章推荐
myeclipse安装jQuery插件的方法
Mar 29 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
js单例模式详解实例
Nov 21 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
jQuery实现字符串全部替换的方法
Dec 12 #Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 #Javascript
简单实现jquery焦点图
Dec 12 #Javascript
javascript中setAttribute兼容性用法分析
Dec 12 #Javascript
jQuery焦点图左右转换效果
Dec 12 #Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 #Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
介绍几个array库的新函数 php
2006/12/29 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php smarty函数扩展
2010/03/15 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
json的使用小结
2016/06/08 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
JavaScript原型式继承实现方法
2019/11/06 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
python实现查询IP地址所在地
2015/03/29 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
金融行业职业生涯规划范文
2014/01/17 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
结婚典礼致辞
2015/07/28 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers