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 技巧
Apr 25 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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
通过html表格发电子邮件
2006/10/09 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
js实现蒙版效果
2020/01/11 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
中学教师岗位职责
2013/11/26 职场文书
销售人员获奖感言
2014/02/05 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Python django中如何使用restful框架
2021/06/23 Python