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重要知识更新
Jul 08 Javascript
url 特殊字符 传递参数解决方法
Jan 01 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
JS实现self的resend
Jul 22 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
三步实现ionic3点击退出app程序
Sep 17 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获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
easyui validatebox验证
2016/04/29 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
如何用python处理excel表格
2020/06/09 Python
努比亚手机官网:nubia
2016/10/06 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
运动会广播稿300字
2014/01/10 职场文书
综治宣传月活动总结
2014/04/28 职场文书
拔河比赛口号
2014/06/10 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
2016公司年会通知范文
2015/04/25 职场文书
2016教师国培研修感言
2015/12/08 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL