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 学习初步 入门教程
Mar 25 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
js实现简单放大镜效果
Mar 07 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
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
Python 文件重命名工具代码
2009/07/26 Python
python妙用之编码的转换详解
2017/04/21 Python
python程序封装为win32服务的方法
2021/03/07 Python
django删除表重建的实现方法
2019/08/28 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
投标担保书范文
2014/04/02 职场文书
篮球比赛策划方案
2014/06/05 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
学期个人自我总结
2015/02/13 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
教师节老师寄语
2015/05/28 职场文书
Go timer如何调度
2021/06/09 Golang
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js