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 相关文章推荐
js压缩利器
Feb 20 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
DHTML Slide Show script图片轮换
Mar 03 Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
浅析javascript 定时器
2014/12/23 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
小学岗位竞聘方案
2014/01/22 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
酒店员工检讨书
2014/02/18 职场文书
运动会800米加油稿
2014/02/22 职场文书
机关搬迁方案
2014/05/18 职场文书
应聘教师求职信
2014/07/19 职场文书
119消防日活动总结
2014/08/29 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP