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 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
HTML上传控件取消选择
Mar 06 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
setTimeout学习小结
2017/02/08 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python字符转换
2008/09/06 Python
python抓取网页内容示例分享
2014/02/24 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Python小进度条显示代码
2019/03/05 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python 命令行传入参数实现解析
2019/08/30 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
python接入支付宝的实例操作
2020/07/20 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
几个SQL的面试题
2014/03/08 面试题
财政局长自荐信范文
2013/12/22 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis