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.fn.extend与jquery.extend
Nov 21 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
修改npm全局安装模式的路径方法
May 15 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
微信小程序之数据绑定原理解析
Aug 14 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 session的锁和并发
2016/01/22 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
python写一个md5解密器示例
2018/02/23 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
详解Python中的分支和循环结构
2020/02/11 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
行政文员岗位职责
2013/11/08 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
国庆促销活动总结
2014/08/29 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书