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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
简单的js计算器实现
Oct 26 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
vue 文件目录结构详解
Nov 24 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
js模拟实现百度搜索
Jun 28 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
javascript编程起步(第五课)
2007/01/10 Javascript
JavaScript触发器详解
2007/03/10 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
微信小程序实现刷脸登录
2018/05/25 Javascript
详解vue axios二次封装
2018/07/22 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Linux下多个Python版本安装教程
2018/08/15 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python 通过文件夹导入包的操作
2020/06/01 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
集体备课反思
2014/02/12 职场文书
借款担保书范文
2014/05/13 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
用人单位聘用意向书
2015/05/11 职场文书
iPhone13再次曝光
2021/04/15 数码科技
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS