提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

封装了一个支持匿名函数的Javascript事件监听器

JavaScript事件封装 函数 一个 支持 匿名 监听器
2023-06-13 09:15:27 时间

关于js中的事件监听大家用的比较多了，无非是判断浏览器是否支持addEventListener和attachEvent，网上搜索关于事件监听的方法也挺多，但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的，只不过在取消事件绑定上面做了点手术，现在可以支持匿名函数的使用，所以在绑定事件的时候不再需要给函数单独命名了。


主要代码：

复制代码代码如下:

/*绑定事件与取消绑定*/
varhandleHash={};
varbind=(function(){
 if(window.addEventListener){
  returnfunction(el,type,fn,capture){
   el.addEventListener(type,function(){
    fn();
    handleHash[type]=handleHash[type]||[];
    handleHash[type].push(arguments.callee);
   },capture);
  };
 }elseif(window.attachEvent){
  returnfunction(el,type,fn,capture){
   el.attachEvent("on"+type,function(){
    fn();
    handleHash[type]=handleHash[type]||[];
    handleHash[type].push(arguments.callee);
   });
  };
 }
})();
varunbind=(function(){
 if(window.addEventListener){
  returnfunction(el,type){
   if(handleHash[type]){
    vari=0,len=handleHash[type].length;
    for(i;i<len;i+=1){
     el.removeEventListener(type,handleHash[type][i]);
    }
   };
  };
 }elseif(window.attachEvent){
  returnfunction(el,type){
   if(handleHash[type]){
    vari=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");

相关文章