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中检测变量的类型的代码
Dec 28 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
JavaScript中的几种继承方法示例
Dec 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
Europcar意大利:汽车租赁
2019/07/07 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
《傅雷家书》教学反思
2014/04/20 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
爱心捐助倡议书
2014/05/19 职场文书
主题党日活动总结
2014/07/08 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
通知范文怎么写
2015/04/16 职场文书
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技