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 相关文章推荐
js查错流程归纳
May 04 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 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
深入PHP许愿墙模块功能分析
2013/06/25 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
python pandas模块基础学习详解
2019/07/03 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
关于Keras Dense层整理
2020/05/21 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2014年组织部工作总结
2014/11/14 职场文书
党校学习个人总结
2015/02/15 职场文书
学生病假条怎么写
2015/08/17 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python