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据option的value值快速设定初始的selected选项
Aug 13 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
简述Vue中容易被忽视的知识点
Dec 09 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
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
红米手机抢购的js代码
2014/03/10 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
python requests 使用快速入门
2017/08/31 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
python中re模块知识点总结
2021/01/17 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
解除劳动合同协议书范本
2014/04/14 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
停电调休通知
2015/04/16 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
素质拓展训练感想
2015/08/07 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS