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之AJAX框架使用说明
Apr 24 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Sanic框架配置操作分析
2018/07/17 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Apache部署Django项目图文详解
2019/07/30 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
python代码中怎么换行
2020/06/17 Python
销售自我评价
2013/10/22 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
花坛标语大全
2014/06/30 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android