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获取单选框或复选框值及操作
Dec 18 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
利用node.js实现反向代理的方法详解
Jul 24 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
JavaScript实现多球运动效果
Sep 07 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 mysql索引问题
2008/06/07 PHP
php二分法在IP地址查询中的应用
2008/08/12 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
python中ConfigParse模块的用法
2014/09/29 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
python 常见的反爬虫策略
2020/09/27 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
机关道德讲堂实施方案
2014/03/15 职场文书
青春无悔演讲稿
2014/05/08 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
地球上的星星观后感
2015/06/02 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL