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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
JS实现标签页切换效果
May 04 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue组件三大核心概念图文详解
May 30 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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
校园门卫岗位职责
2013/12/09 职场文书
学校宣传标语
2014/06/18 职场文书
先进事迹演讲稿
2014/09/01 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js