書:”Pro JavaScript Techniques 精通JavaScript”之綁定/移除事件監聽函數

//由Dean Edwards所編寫的addEvent / removeEvent,這裡對原作者的代碼作了一些擴充 //http://dean.edwards.name/weblog/2005/10/add-event/

function addEvent(element, type, handler) {  //為每一個事件處理函數賦予一個獨立的ID  if (!handler.$guid) handler.$guid = addEvent.guid++;  //為元素建立一個事件類型的散列表  if (!element.events) element.events = {};  //為每對元素/事件建立一個事件處理函數的散列表  var handlers = element.events[type];  if (!handlers) {    handlers = element.events[type] = {};    //儲存已有的事件處理函數(如果已存在一個)    if (element["on" + type]) {      handlers[0] = element["on" + type];    }  }  //在散列表中儲存事件處理函數  handlers[handler.$guid] = handler;  //賦予一個全域事件處理函數來處理所有工作  element["on" + type] = handleEvent;};//建立獨立ID的計數器addEvent.guid = 1;function removeEvent(element, type, handler) {  //從散列表中刪除事件處理函數  if (element.events && element.events[type]) {    delete element.events[type][handler.$guid];  }};function handleEvent(event) {  var returnValue=true;  //擷取事件對象(IE使用全域的事件對象)  event = event ||fixEvent(window.event);  //擷取事件處理函數散列表的引用  var handlers = this.events[event.type];  //依次執行每個事件處理函數  for (var i in handlers) {    this.$handleEvent = handlers[i];    if (this.$handlerEvent(event) === false) {        returnValue = false;    }  }};//增加一些IE事件對象的缺乏的方法function fixevent(event){    //增加W3C標準事件方法    event.preventDefault = fixEvent.preventDefault;    event.stopPropagation = fixEvent.stopPropagation;    return event;}fixEvent.preventDefault = function() {   this.returnValue = false;};fixEvent.stopPropagation = function() {   this.cancelBubble = true;};

===========================================================
1.addEvent的優點 以下是Dean Edward 的 addEvent 事件Binder 方法的優點     可以在所有瀏覽器中工作,就算是更古老無任何支援的瀏覽器     this關鍵字可在所有的綁定函數中使用,指向的是當前元素     中和了所有防止瀏覽器預設行為和阻止事件冒泡的各種瀏覽器特定函數     不管瀏覽器類型，事件對象總是作為第一個對象傳入 2.addEvent的缺點 以下是Dean Edward 的 addEvent 事件Binder 方法的缺點     僅工作在冒泡階段(因為它深入使用事件綁定的傳統方法)