支持匿名函数的JavaScript事件监听与取消绑定封装

支持匿名函数的JavaScript事件监听封装

在JavaScript开发中，事件监听是常见操作。通常的做法是判断浏览器是否支持addEventListener或attachEvent。尽管网上关于事件监听的资料众多，但往往存在不完善之处。本文提出的方法在添加事件监听上与常规方式一致，但在取消事件绑定方面进行了改进，主要优势在于支持匿名函数的使用，从而避免了为函数单独命名的繁琐步骤。

核心实现逻辑如下所示：

/*定义事件绑定与解绑函数*/
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作为哈希表来缓存事件对应的函数。handleHash['事件名称']是一个数组，用于存储多个事件监听方法。当需要解绑某个事件时，遍历handleHash['事件名称']对应的数组，依次移除相应的事件监听器。

使用示例：

bind(obj,'click',function(){
alert ('click');
});
unbind(obj,'click');