jquery用data方法获取某个元素上的事件


Posted in Javascript onJune 23, 2014

jquery的给元素绑定的事件可以用data方法取出来

通过$(element).data("events")来获取

// 比如给一个button绑定两个click事件

$("button").click(function() { alert("1") });
$("button").click(function() { alert("2") });

// 这个时候点击该button会分别弹出 2 和1的alert框
// 取出该button的所有click事件,是个数组
$("button").data('events').click

会看到两个click事件的数组

得到该数组,你可以调整顺序后再设回去

$("button").data('events').click = newEventArray;

下面是这个方法的测试页面:

<span style="font-size:18px;"><%@ page contentType="text/html;charset=UTF-8" language="java" %> 

<!DOCTYPE HTML> 
<html> 
<head> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>测试jquery动态改变事件</title> 

<script type="text/javascript" src="/static/lib/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="/static/lib/jquery.cookie.min.js"></script> 
<script type="text/javascript" src="/static/lib/util.min.js"></script> 
<script type="text/javascript" src="/static/lib/jquery.bgiframe.min.js"></script> 
<script type="text/javascript" src="/static/lib/jshashtable.min.js"></script> 
</head> 
<body> 
<h1>该demo用于测试jquery附加了事件以后可不可以动态改变事件有无,及顺序</h1> 
<input id="btn" type="button" value="点击我执行事件,分别执行三个次序弹窗"/><br/> 
<input id="btn_clear" type="button" value="点击清空执行事件,清空后第一个按钮无反应"/><br/> 
<input id="btn_revert" type="button" value="点击还原执行事件,点击后第一个按钮又会有反应"/><br/> 
<input id="btn_seq" type="button" value="点击我改变执行事件顺序,顺序会改变"/><br/> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#btn").click(function(){ 
alert(1); 
}); 
$("#btn").click(function(){ 
alert(2); 
}); 
$("#btn").click(function(){ 
alert(3); 
}); 
var _arr_events= $("#btn").data("events")["click"]; 
$("#btn_clear").click(function(){ 
$("#btn").data("events")["click"]=undefined; 
}); 
$("#btn_revert").click(function(){ 
$("#btn").data("events")["click"]=_arr_events; 
}); 

}); 
</script> 
</body> 
</html> 
</span>
Javascript 相关文章推荐
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
javascript常用经典算法详解
Jan 11 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
微信小程序实现watch监听
Jun 04 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 #Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 #Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 #Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 #Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 #Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 #Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 #Javascript
You might like
PHP实现分页的一个示例
2006/10/09 PHP
php 动态添加记录
2009/03/10 PHP
php 进度条实现代码
2009/03/10 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
安装PyInstaller失败问题解决
2019/12/14 Python
如何使用python代码操作git代码
2020/02/29 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Django在Model保存前记录日志实例
2020/05/14 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
浅析Python中字符串的intern机制
2020/10/03 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
自荐信要包含哪些内容
2013/11/06 职场文书
勤俭节约倡议书
2014/04/14 职场文书
交通事故私了协议书
2014/04/16 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
大学生赌博检讨书
2014/09/22 职场文书
个人政治思想总结
2015/03/05 职场文书
毕业设计论文致谢词
2015/05/14 职场文书