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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
Angular 应用技巧总结
Sep 14 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 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中的类-什么叫类
2006/11/20 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php实现的通用图片处理类
2015/03/24 PHP
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Golang与python线程详解及简单实例
2017/04/27 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
浅谈Python __init__.py的作用
2020/10/28 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
HTML5标签大全
2016/11/23 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
公司董事长职责
2013/12/12 职场文书
唐山大地震观后感
2015/06/05 职场文书
优质服务标语口号
2015/12/26 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
一文解答什么是MySQL的回表
2022/08/05 MySQL