JavaScriptバインディングイベントリスニング関数の一般的な方法

イベントバインディングの3つの一般的な方法:従来のバインディング、W 3 Cバインディング方法、IEバインディング方法.しかし、実際の開発では、一般的なブラウザ間バインド方法が必要です.インターネットで検索すると、多くの方法が見つかります.以下は有名ないくつかの方法です.
学期の次のいくつかの方法を開始する前に、良いaddEvent()方法がどのような要求を達成すべきかを議論する必要があります.
a、同じ要素をサポートする同じイベントハンドルは複数の傍受関数をバインドすることができる.
b、同じ要素の同じイベントハンドルに同じ関数が複数回登録されている場合、最初の登録後のすべての登録は無視されます.
c、関数内のthisは、現在イベントハンドルを実行しているノードなど、イベントを処理しているノードを指すべきである.
d、傍受関数の実行順序は、バインドされた順序で実行されるべきである.
e、関数内でevent=eventを使用しないevent; Eventオブジェクトを標準化します.
一、John Resigが書いたaddEvent()関数

 function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
   obj['e'+type+fn] = fn;
   obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
   obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
   obj.addEventListener( type, fn, false );
 }
 function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
   obj.detachEvent( 'on'+type, obj[type+fn] );
   obj[type+fn] = null;
  } else
   obj.removeEventListener( type, fn, false );
 }

この関数がこんなに分かりやすくて、確かに驚きました.では、上記の5つの要件を見てみましょう.
第一点に満足した.
3点目と5点目についても、きっと満足したに違いない.
第2の点については、addEventListener()は重複登録を無視し、attachEvent()は無視しないため、満足していない.
しかし、4つ目は、Dom規格が1つのオブジェクトを呼び出す時間処理関数の順序を決定していないため、登録された順序で呼び出されるとは当然ではない.
しかし、この関数は依然として非常に優れた関数です.
二、Dean Edwardが書いたaddEvent()関数

function addEvent(element, type, handler) {
 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;
}

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;
 event = event || fixEvent(window.event);
 var handlers = this.events[event.type];
 for (var i in handlers) {
  this.$$handleEvent = handlers[i];
  if (this.$$handleEvent(event) === false) {
   returnValue = false;
  }
 }
 return returnValue;
};
 
function fixEvent(event) {
 event.preventDefault = fixEvent.preventDefault;
 event.stopPropagation = fixEvent.stopPropagation;
 return event;
};
fixEvent.preventDefault = function() {
 this.returnValue = false;
};
fixEvent.stopPropagation = function() {
 this.cancelBubble = true;
}; 

この関数は従来のバインド方法を使用しているので、すべてのブラウザで動作したり、メモリの漏洩を起こさないことができます.
しかし,最初に提案した5点については,この関数は上位4点を満たしただけである.JavaScriptでfor/in文の実行順序が付与された順序で実行されるとは規定されていないため、ほとんどの時点で予想される順序で実行されるにもかかわらず、JavaScriptバージョンや実装ではこの文の順序が異なる可能性があります.
三、Dean EdwardのaddEvent()関数の改善

 Array.prototype.indexOf = function( obj ){
 var result = -1 , length = this.length , i=length - 1;
 for ( ; i>=0 ; i-- ) {
  if ( this[i] == obj ) {
   result = i;
   break;
  }
 }
 return result;
}
Array.prototype.contains = function( obj ) {
 return ( this.indexOf( obj ) >=0 )
}
Array.prototype.append = function( obj , nodup ) {
 if ( !(nodup && this.contains( obj )) ) {
  this[this.length] = obj;
 }
}
Array.prototype.remove = function( obj ) {
 var index = this.indexOf( obj );
 if ( !index ) return ;
 return this.splice( index , 1);
};
function addEvent(element , type , fun){
 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.append( fun , true)
 element['on' + type] = handleEvent;
}
function removeEvent(element , type , fun) {
 if (element.events && element.events[type]) {
  element.events[type].remove(fun); 
 }
}
function handleEvent(event) {
 var returnValue = true , i=0;
 event = event || fixEvent(window.event);
 var handlers = this.events[event.type] , length = handlers.length;
 for ( ; i < length ; i++) {
  if ( handlers[i].call( this , event) === false ){
   returnValue = false;
  }
 }
 return returnValue;
}
function fixEvent(event) {
 event.preventDefault = fixEvent.preventDefault;
 event.stopPropagation = fixEvent.stopPropagation;
 return event;
}
fixEvent.preventDefault = function() {
 this.returnValue = false;
};
fixEvent.stopPropagation = function() {
 this.cancelBubble = true;
};
 

この関数は本人がDean EdwardのaddEvent()関数の改善に対して、完全に最初に提出した5点の要求を満たして、みんなの学習に役立つことを望んで、みんなの読書に感謝します.