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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
jQuery常用选择器详解
Jul 17 jQuery
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 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/11/16 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
js密码强度校验
2015/11/10 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python ORM编程基础示例
2020/02/02 Python
最小二乘法及其python实现详解
2020/02/24 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
软件测试面试题
2014/01/05 面试题
EntityManager都有哪些方法
2013/11/01 面试题
前台接待岗位职责
2013/12/03 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
设计大赛策划方案
2014/06/13 职场文书
内勤岗位职责范本
2015/04/13 职场文书
迎新年主持词
2015/07/06 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android