JQuery自动触发事件的方法


Posted in Javascript onJune 13, 2015

本文实例讲述了JQuery自动触发事件的方法。分享给大家供大家参考。具体如下:

常用模拟

有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。

在JQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。

$('#btn').trigger("click");

这样,当页面加载完毕后,就会立刻输出想要的效果。也可以直接简写click(),来达到同样的效果:

$('#btn').click();

触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件,JQuery代码如下:

$('#btn').bind("myClick", function(){ 
  $('#test').append("<p>我的自定义事件.</p>"); 
});

想要触发这个事件,可以使用以下代码来实现:

$('#btn').trigger("myClick");

传递数据

trigger(type[,data])方法有两个参数,第1个参数是要触发的事件类型,第2个参数是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

下面是一个传递数据的例子。

$(function(){ 
 $('#btn').bind("myClick", function(event, message1, message2){ 
     $('#test').append( "<p>"+message1 + message2 +"</p>");
 }); 
 $('#btn').click(function(){ 
  $(this).trigger("myClick",["我的自定义","事件"]); 
 }).trigger("myClick",["我的自定义","事件"]); 
})

执行默认操作

trigger()方法触发事件后,会执行浏览器默认操作。例如:

$("input").trigger("focus");

以上代码不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(这是浏览器的默认操作)。

如果只想触发绑定的focus事件,而不想执行浏览器默认操作,可以使用jQuery中另一个类似的方法——triggerHandler()方法。

$("input").triggerHandler("focus");

该方法会触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作,即文本框只触发绑定的focus事件,不会得到焦点。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 #Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 #Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 #Javascript
JQuery中DOM事件绑定用法详解
Jun 13 #Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 #Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 #Javascript
JavaScript中的Math.E属性使用详解
Jun 12 #Javascript
You might like
PHP中常用的输出函数总结
2014/09/22 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
js判断undefined类型示例代码
2014/02/10 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python中is与==判断的区别
2017/03/28 Python
Python编程实现蚁群算法详解
2017/11/13 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
法学毕业生自我鉴定
2013/11/08 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
小学体育教学反思
2014/01/31 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
团员年度个人总结
2015/02/26 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
撤诉书怎么写
2015/05/19 职场文书
小学英语听课心得体会
2016/01/14 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android