jQuery如何使用自动触发事件trigger


Posted in Javascript onNovember 29, 2015

有时候,需要通过模拟用户操作,来达到点击的效果,例如用户进入页面后
就触发click事件,而无需主动点击。

比如以下代码:

<body>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x1'">点击1</a>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x2'">点击2</a>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x3'">点击3</a>
  </br>
  <span id="d"></span>
</body>

实现效果为'点击1'页面上将显示x1 ,'点击2'页面上显示x2 …
但需要实现首次进入页面为默认是'点击1'

jQuery如何使用自动触发事件trigger

在jQuery中,可以使用trigger()方法完成模拟操作。
例如可以使用下面的代码来触发A链接的click事件。

$('a').first().trigger("click");

这样 当页面加载完毕后,触发第一个A链接的click事件,页面将显示x1

触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。
例如为元素绑定一个”myEvent”的事件,jQuery代码如下:

$('#btn').bind("myEvent", function(){ 
  alert("自定义事件");
});

想要触发这个事件,可以使用以下代码来实现:

$('#btn').trigger("myEvent");

传递数据

trigger(type,[data])方法有两个参数,
第1个是事件对象或者要触发的事件类型,
第2个参数是传递给事件处理函数的附加参数,
以数组形式传递。通常可以通过传递一个参数给
回调函数来区别这次事件是代码触发的还是用户触发的。

下面是一个传递数据的例子。

$('#btn').bind("myEvent", function(event,message1,message2){ 
  alert(message1 + "," + message2);
});
$('#btn').trigger("myEvent", ["Hello","World!"]);

以上就是jQuery自动触发事件trigger的使用方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
js实现文字滚动效果
Mar 03 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
js性能优化技巧
Nov 29 #Javascript
javascript实现C语言经典程序题
Nov 29 #Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 #Javascript
整理Javascript基础入门学习笔记
Nov 29 #Javascript
jquery+json实现数据二级联动的方法
Nov 28 #Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 #Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
生成php程序的php代码
2008/04/07 PHP
php zend 相对路径问题
2009/01/12 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
Javascript的构造函数和constructor属性
2010/01/09 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
vue router demo详解
2017/10/13 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Python中的yield浅析
2014/06/16 Python
学生信息管理系统python版
2018/10/17 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
大学生的自我鉴定范文
2014/01/21 职场文书
铁路工务反思材料
2014/02/07 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
ztree+ajax实现文件树下载功能
2021/05/18 Javascript