先看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事件监听封装(支持匿名函数)的更多相关文章

  1. js 事件监听封装

    var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...

  2. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  3. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  4. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  5. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  6. js事件监听

    /* 事件监听器 addEventListener() removeEventListener() 传统事件绑定: 1.重复添加会,后添加的后覆盖前面的. */ 示例代码中的html结构: <b ...

  7. js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

    研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...

  8. 前端学习历程--js事件监听

    一.事件监听使用场景 1.事件触发多个方法的时候,后一个方法会把前一个方法覆盖掉. window.onload = function(){  var btn = document.getElement ...

  9. js中邦定事件与解绑支持匿名函数

    和一个朋友讨论了一下,DOM2绑定方式都是有名的函数,匿名的处理起来有些麻烦,而且即使是有名的函数,在IE低版本的浏览器也是解除不掉的,this指向需要修改,着实费了一番功夫,这个是兼容ie低版本的, ...

随机推荐

  1. php-elasticsearch scroll分页详解

    背景 ps:首先我们在一个索引里面写入一万条以上的数据.作为数据源 现在我想看到第一万零一条数据,首先第一想法是,from 10000 size 1 ,这样做会包下面错误.显然是不成立的.此时便会用到 ...

  2. java架构师之路,享学课堂VIP课程视频下载

    享学课堂并发编程:百度网盘 链接:https://pan.baidu.com/s/10O8oXC0yNRArUh3WKkXayg 提取码:o01s 更多视频获取方式请留言

  3. vue 之bug<1> Warn : [vue-router] Duplicate named routes definition:

    原因:定义重复的路由名称. 我有3个不同的(父级)vue文件分别配置了3个相同的(子级)vue文件,配置路由的js文件里子集路由的name重复了. 解决方案: 一天一个小Bug

  4. 1-----Docker实例-安装Nginx

    Docker 安装 Nginx 方法一.docker pull nginx(推荐) 查找 Docker Hub 上的 nginx 镜像 runoob@runoob:~/nginx$ docker se ...

  5. 关于cmdbuild

    哪位大神用过cmdbuild,网上的资料非常少,而且都是关于如何安装的,就在这少只又少的文章里,居然还都是互抄的,哎!!!

  6. Oracle 事务操作

    在看本文之前,请确保你已经了解了Oracle事务和锁的概念即其作用,不过不了解,请参考数据库事务的一致性和原子性浅析和Oracle TM锁和TX锁 1.提交事务 当执行使用commit语句可以提交事务 ...

  7. Kafka 0.9 新特性

    Kafka发布0.9了,这一重磅消息,让小伙伴们激动不已,来看看这个版本有哪些值得关注的地方吧! 一.安全特性 在0.9之前,Kafka安全方面的考虑几乎为0,在进行外网传输时,只好通过Linux的防 ...

  8. idea开发环境中maven控制台乱码解决

    在pom文件中加入 红色那行, <properties>        <project.build.sourceEncoding>UTF-8</project.buil ...

  9. 修改MyEclipse8.5的workspaces

    到MyEclipse8.5的安装目录下 我安装在D盘,路径为:D:\Genuitec\MyEclipse 8.5\configuration\config.ini   打开config.ini文件: ...

  10. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...