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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
JS中Array数组学习总结
Jan 18 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
详解node中创建服务进程
May 09 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 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水印技术
2007/02/14 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
9种python web 程序的部署方式小结
2014/06/30 Python
python 实时遍历日志文件
2016/04/12 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python中添加模块导入路径的方法
2021/02/03 Python
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
汇源肾宝广告词
2014/03/20 职场文书
社区志愿者培训方案
2014/06/10 职场文书
办理房产证委托书
2014/09/18 职场文书