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陷阱清单
May 31 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
用PHP调用数据库的存贮过程
2006/10/09 PHP
php基础教程
2015/08/26 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
js实现移动端轮播图
2020/12/21 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python字符串反转的四种方法详解
2019/12/02 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
商务助理岗位职责
2013/11/13 职场文书
班组长安全生产职责
2013/12/16 职场文书
协议书范本
2014/04/23 职场文书
小学数学课题方案
2014/06/15 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android