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 相关文章推荐
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
vue+echarts实现多条折线图
Mar 21 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
详解javascript高级定时器
2015/12/31 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
loading动画特效小结
2017/01/22 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python File(文件) 方法整理
2019/02/18 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
师范学院教师自荐书
2014/01/31 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
体育教师个人工作总结
2015/02/09 职场文书
工程部岗位职责范本
2015/04/11 职场文书
法定代表人免职证明
2015/06/24 职场文书