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 相关文章推荐
onpropertypchange
Jul 01 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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
smarty实例教程
2006/11/19 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
javascript的事件触发器介绍的实现
2014/06/05 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
windows下安装Python和pip终极图文教程
2017/03/05 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python collections模块的使用方法
2020/10/09 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
岗位职责风险防控
2014/02/18 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
个人安全承诺书
2014/05/22 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
出纳试用期自我评价
2015/03/10 职场文书
运动会运动员赞词
2015/07/22 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
Golang入门之计时器
2022/05/04 Golang