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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 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 header()函数使用说明
2008/07/10 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
8个PHP数组面试题
2015/06/23 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php制作简单模版引擎
2016/04/07 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
微信小程序实现弹框效果
2020/05/26 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Django 迁移、操作数据库的方法
2019/08/02 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
法制报告会主持词
2014/04/02 职场文书
《学会合作》教学反思
2014/04/12 职场文书
同居协议书范本
2014/04/23 职场文书
小学生安全演讲稿
2014/04/25 职场文书
团队精神的演讲稿
2014/05/14 职场文书
工作所在部门证明
2014/09/21 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2015年纪委工作总结
2015/05/13 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python