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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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
PHP5常用函数列表(分享)
2013/06/07 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
java直接调用python脚本的例子
2014/02/16 Python
Python理解递归的方法总结
2019/01/28 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
给民警的表扬信
2014/01/08 职场文书
校园十大歌手策划书
2014/02/01 职场文书
仓库文员岗位职责
2014/04/06 职场文书
班主任评语大全
2014/04/26 职场文书
保护黄河倡议书
2014/05/16 职场文书
承诺书格式
2014/06/03 职场文书
高考励志标语
2014/06/05 职场文书
建筑安全标语
2014/06/07 职场文书
安全施工责任书
2014/08/25 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
学生党员检讨书范文
2014/12/27 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python