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中的apply和call函数详解
Jul 20 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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
第一个无线电台是由谁发明的
2021/03/01 无线电
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python基于当前时间批量创建文件
2020/05/07 Python
python中有函数重载吗
2020/05/28 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
高中毕业生自我鉴定例文
2013/12/29 职场文书
初一科学教学反思
2014/01/27 职场文书
政风行风整改方案
2014/10/25 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server