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 全角转半角部分
Oct 28 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
js实现文字选中分享功能
Jan 25 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
javascript实现简易聊天室
Jul 12 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
Vue中引入svg图标的两种方式
Jan 14 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
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python实现简单五子棋游戏
2019/06/18 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
django 微信网页授权登陆的实现
2019/07/30 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
python实现计算图形面积
2021/02/22 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
软件测试工程师结构化面试题库
2016/11/23 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
《我的信念》教学反思
2014/02/15 职场文书
市场推广策划方案
2014/06/02 职场文书
医院合作协议书
2014/08/19 职场文书
农村婚庆主持词
2015/06/29 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
PHP RabbitMQ消息列队
2022/05/11 PHP