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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
聊天室php&amp;mysql(三)
2006/10/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
php命令行写shell实例详解
2018/07/19 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
创建nuxt.js项目流程图解
2020/03/13 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
在keras中实现查看其训练loss值
2020/06/16 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Python jieba库分词模式实例用法
2021/01/13 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
旷课检讨书大全
2014/01/21 职场文书
创新比赛获奖感言
2014/02/13 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
办公室岗位职责范本
2015/04/11 职场文书
酒会开场白大全
2015/06/01 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
Golang ort 中的sortInts 方法
2022/04/24 Golang