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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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发电子邮件
2006/10/09 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
详解python调度框架APScheduler使用
2017/03/28 Python
python简单实现AES加密和解密
2019/03/28 Python
python requests证书问题解决
2019/09/05 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
我的求职计划书
2014/01/10 职场文书
大一新生学期自我评价
2014/04/09 职场文书
2015年档案室工作总结
2015/05/23 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
企业年会祝酒词
2015/08/11 职场文书