首頁  >  文章  >  web前端  >  封裝了一個支援匿名函數的Javascript事件監聽器_javascript技巧

封裝了一個支援匿名函數的Javascript事件監聽器_javascript技巧

WBOY
WBOY原創
2016-05-16 16:46:041278瀏覽

關於js中的事件監聽大家用的比較多了,無非是判斷瀏覽器是否支援addEventListener和attachEvent,網路搜尋關於事件監聽的方法也挺多,但是總有些不是很完善。下面的方法中對於添加事件監聽的方法是一樣的,只不過在取消事件綁定上面做了點手術,現在可以支持匿名函數的使用,所以在綁定事件的時候不再需要給函數單獨命名了。


主要程式碼:

複製程式碼


程式碼

/*綁定事件與取消綁定*/
var handleHash = {};
var bind = (function() {
 if (window.addEventListener) {
 el, type, fn, capture) {
   el.addEventListener(type, function(){
    fn();
    handleHash[type] = handhandle); [type].push(arguments.callee);
   }, capture);
  };
 } else if (window.attachEvent) {
  return function(el. {
   el.attachEvent("on" type, function(){
    fn();
    handleHash[type] = handleHash[type] || [||];   });
  };
 }
})();
var unbind = (function(){  return function(el, type ) {
   if(handleHash[type]){
    var i = 0, len = handleHash[type].length   var i = 0, len = handleHash[type]。 i = 1){
     el.removeEventListener(type, handleHash[type][i]);
    }
   };
  }
   };
  }
  return function(el, type) {
   if(handleHash[type]){
    var i = 0, len = handleHash[type].length 🎜>; = 1){
     el.detachEvent("on" type, handleHash[type][i]);
    }
   };
   }
   };
   } ;

原理解析:

handleHash做雜湊表快取事件的function,handleHash['事件名稱']是一個數組,來加入多個事件監聽的方法,unbind哪個事件的時候遍歷handleHash['事件名稱']的數組,然後移除。

使用:

複製程式碼 代碼如下:

代碼如下: alert ('click');
});
unbind(obj,'click');
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn