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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
require.js的用法详解
Oct 20 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 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(三)
2012/03/22 PHP
简单的php文件上传(实例)
2013/10/27 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php微信开发之谷歌测距
2018/06/14 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
javascript中的隐式调用
2018/02/10 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
如何开发安全的AJAX应用
2014/03/26 面试题
文秘专业毕业生就业推荐信
2013/11/08 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
教师产假请假条范文
2014/04/10 职场文书
考察现实表现材料
2014/05/19 职场文书
预备党员转正考核材料
2014/06/03 职场文书
健康教育主题班会
2015/08/14 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技