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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
node.js的事件机制
Feb 08 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP分页类集锦
2014/11/18 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
PHP强制转化的形式整理
2020/05/22 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
python实现学生管理系统开发
2020/07/24 Python
python利用线程实现多任务
2020/09/18 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
爱护公共设施演讲稿
2014/09/13 职场文书
安全教育日主题班会
2015/08/13 职场文书
总经理聘用协议书
2015/09/21 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers