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 指导方针
Apr 05 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
微信小程序实现星级评分和展示
Jul 05 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代码
2008/04/09 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
Python selenium文件上传方法汇总
2020/11/19 Python
pyenv命令管理多个Python版本
2017/03/26 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Django xadmin安装及使用详解
2020/10/26 Python
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
工作表现自我评价
2014/02/08 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
电信营业员岗位职责
2015/04/14 职场文书
朋友聚会开场白
2015/06/01 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
讲解Python实例练习逆序输出字符串
2022/05/06 Python