Js事件监听封装(支持匿名函数)
先看demo:http://liutian1937.github.io/demo/EventListen.html
/*绑定事件与取消绑定*/
var handleHash = {};
var bind = (function() {
if (window.addEventListener) {
return function(el, type, fn, capture) {
el.addEventListener(type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push(arguments.callee);
}, capture);
};
} else if (window.attachEvent) {
return function(el, type, fn, capture) {
el.attachEvent("on" + type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push(arguments.callee);
});
};
}
})();
var unbind = (function(){
if (window.addEventListener) {
return function(el, type ) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i<len ; i += 1){
el.removeEventListener(type, handleHash[type][i]);
}
};
};
} else if (window.attachEvent) {
return function(el, type) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i<len ; i += 1){
el.detachEvent("on" + type, handleHash[type][i]);
}
};
};
}
})();
原理解析:
handleHash做哈希表缓存事件的function,handleHash['事件名称']是一个数组,来添加多个事件监听的方法,unbind哪个事件的时候遍历handleHash['事件名称']的数组,然后移除。
bind(obj,'click',function(){
alert ('click');
});
unbind(obj,'click');
Js事件监听封装(支持匿名函数)的更多相关文章
- js 事件监听封装
var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
- js事件监听
/* 事件监听器 addEventListener() removeEventListener() 传统事件绑定: 1.重复添加会,后添加的后覆盖前面的. */ 示例代码中的html结构: <b ...
- js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)
研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...
- 前端学习历程--js事件监听
一.事件监听使用场景 1.事件触发多个方法的时候,后一个方法会把前一个方法覆盖掉. window.onload = function(){ var btn = document.getElement ...
- js中邦定事件与解绑支持匿名函数
和一个朋友讨论了一下,DOM2绑定方式都是有名的函数,匿名的处理起来有些麻烦,而且即使是有名的函数,在IE低版本的浏览器也是解除不掉的,this指向需要修改,着实费了一番功夫,这个是兼容ie低版本的, ...
随机推荐
- 2019.2.15 t2
考虑倒过来计算最短路径长度,设dis[u]表示在最坏情况下,点u到最近的一 个出口的最短路,则p个出口的dis值都是0,答案即为dis[0]. #include <cstdio> #inc ...
- mysql5.1解压版安装
1.如果已经安装别的版本先卸载干净,cmd管理员权限登录,mysql\bin目录:mysqld -remove 2.环境变量 MYSQL:path 3.my.ini [mysqld]port=3306 ...
- springboot(十)-监控应用
微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...
- 02-线性结构4 Pop Sequence (25 分)
Given a stack which can keep M numbers at most. Push N numbers in the order of 1, 2, 3, ..., N and p ...
- SELinux 引起的 Docker 启动失败
问题描述 Linux OS 版本 CentOS Linux release 7.2.1511 (Core) 启动Docker service docker start 启动失败信息 原因分析 Erro ...
- centos 7 设置开机启动服务
2018-12-25 Centos7下添加开机自启动脚本和服务的方法 以docker 服务为例 1.centos7自带命令设置 systemctl enable docker.service 2.设置 ...
- java程序没有运行选项
1.检查module是否正确 确保src为资源文件 2.检查是否有main函数
- 转 RMAN: RAC Backup, Restore and Recovery using RMAN
PURPOSE The purpose of this document is to give a quick guide for using RMAN on RAC databases. We wi ...
- fish shell version
如果你使用 fish shell, 想要自己定义变量,或者函数,或者alias, 不要使用 version 这个名字, 因为,version 这个名字 被 fish 本身占了.... ...
- SqlHelper中SqlHelperParameterCache类的用法介绍
SqlHelper类中提供了三种可以用来管理SqlParameter参数的共享方法.下面来一一讲解: 1.CacheParameterSet 将SqlParameter参数数组存储到本地缓存中 2.G ...