先看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. 10分钟教你用Python实现微信自动回复

    01 前言&&效果展示 相信大家都有忙碌的时候,不可能一直守在微信上及时回复消息.但微信又不能像QQ一样设置自动回复.无妨,今天,我们就来用Python实现微信的自动回复功能吧,并且把 ...

  2. 【转】MVC,MVP 和 MVVM 的图示

    复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身很容易理解,但是要讲清楚,它与衍生的 MVP ...

  3. esp32 blink实验

    #include<stdio.h>#include"freertos/FreeRTOS.h"#include"freertos/task.h"#in ...

  4. tomcat 搭建以及发布配置

    身为开发人员, 一直干着开发的事情, 只干开发的事情, 却缺少了对于环境部署方面的必备技能的培养, 所以在公司安排的手头任务解决完的情况下, 自己抽空了解并且实践了一下tomcat的配置.写下通过网络 ...

  5. flask实战-个人博客-使用类组织配置

    使用类组织配置 在实际需求中,我们往往需要不同的配置组合.例如,开发用的配置,测试用的配置,生产环境用的配置.为了能方便地在这些配置中切换,你可以把配置文件升级为包,然后为这些使用场景分别创建不同的配 ...

  6. php 多字节编码转换

    PHP 支持的编码 mb_convert_encoding — 转换字符的编码 string mb_convert_encoding ( string $str , string $to_encodi ...

  7. 进阶篇:3)面向制造的设计DFM

    本章目的:正确认识面向制造的设计-DFM. 1.DFM概念 DFM有两种描述是作者比较认可的. ①面向制造的设计(design for manufacturing简称DFM):指产品设计需要满足产品制 ...

  8. QT 相关

    Qt是一个GUI框架,在GUI程序中,主线程也叫GUI线程,因为它是唯一被允许执行GUI相关操作的线程.对于一些耗时的操作,如果放在主线程中,就是出现界面无法响应的问题. 解决方法一:在处理耗时操作中 ...

  9. 面向对象程序设计(C++)_作业一_设计、定义并实现Complex类

    源代码: 运行结果:

  10. nginx常用配置3

    ## 六.浏览器本地缓存配置 语法:expires 60 s|m|h|d ```动静分离效果: server { listen 80; server_name localhost; location ...