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 八进制转义字符(8进制)
Apr 08 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
js选项卡的实现方法
Feb 09 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
从零学Python之hello world
2014/05/21 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
详解python的四种内置数据结构
2019/03/19 Python
如何使用python代码操作git代码
2020/02/29 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
外包公司软件测试工程师
2014/11/01 面试题
应届生护士求职信
2013/11/01 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2014年英语工作总结
2014/12/20 职场文书
工人先进事迹材料
2014/12/26 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
《司马光》教学反思
2016/02/22 职场文书
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL