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 相关文章推荐
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 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
桌面中心(二)数据库写入
2006/10/09 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
详解python3中tkinter知识点
2018/06/21 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
python线程池如何使用
2020/05/28 Python
详解python tkinter 图片插入问题
2020/09/03 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
python源文件的字符编码知识点详解
2021/03/04 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
学院书画协会部门职责
2013/11/28 职场文书
小学新学期教师寄语
2014/01/18 职场文书
劳动实践课感言
2014/02/01 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
伊索寓言教学反思
2014/05/01 职场文书
校长创先争优承诺书
2014/08/30 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
小学班主任个人总结
2015/03/03 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
初三毕业感言
2015/07/31 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL