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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
javascript学习之闭包分析
Dec 02 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
JavaScript ES6常用基础知识总结
Feb 09 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
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
连接Python程序与MySQL的教程
2015/04/29 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python做反被爬保护的方法
2019/07/01 Python
Python使用re模块验证危险字符
2020/05/21 Python
python3将变量输入的简单实例
2020/08/19 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
办公室规章制度范本
2015/08/04 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android