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自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python查询mysql,返回json的实例
2018/03/26 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python3实现字符串操作的实例代码
2019/04/16 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
本科毕业自我鉴定
2014/03/20 职场文书
进口业务员岗位职责
2014/04/06 职场文书
企业宣传工作方案
2014/06/02 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS