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解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
webpack打包js的方法
Mar 12 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
js实现搜索栏效果
Nov 16 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
Vue3.0的优化总结
Oct 16 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
用js编写留言板
2020/03/17 Javascript
python插入数据到列表的方法
2015/04/30 Python
python遍历目录的方法小结
2016/04/28 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
python操作 hbase 数据的方法
2016/12/18 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python下载微信公众号相关文章
2019/02/26 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python文件排序的方法总结
2020/09/13 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
工作求职自荐信
2014/06/13 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
英语教师个人工作总结
2015/02/09 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers