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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 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/03/20 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
keras之权重初始化方式
2020/05/21 Python
python eventlet绿化和patch原理
2020/11/21 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
工商企业管理应届生求职信
2014/05/04 职场文书
食堂标语大全
2014/06/11 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2016七夕情人节感言
2015/12/09 职场文书