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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
详解JavaScript的变量
Apr 04 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
JavaScript实现轮播图效果
Oct 30 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 创建标签云函数代码
2010/05/26 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Python实现分数序列求和
2020/02/25 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
DTD的含义以及作用
2014/01/26 面试题
统计系教授推荐信
2014/02/28 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
就业意向书范本
2015/05/11 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
个人合作协议范本
2015/08/06 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android