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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
js实现复制粘贴的两种方法
Dec 04 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
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
python查找第k小元素代码分享
2013/12/18 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
windows下python和pip安装教程
2018/05/25 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
拉歌口号大全
2014/06/13 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
职代会闭幕词
2015/01/28 职场文书
大学生自我评价范文
2015/03/03 职场文书
高中团支书竞选稿
2015/11/21 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android