JavaScriptイベントバインディング

本論文ではJavaScriptイベントのバインディングの一般的な方法と長所と短所を紹介します.最後にDean Edwardsによって書かれた比較的完璧なイベントバインディング方式を示します.
伝統的な方式element.onclick = function(e){ // ... };

従来のバインディングの利点

1.非常に簡単で安定しています.使用しているブラウザの中で動作が一致することを確認できます.2.イベントを処理する時、thisキーワードは現在の要素を引用しています.

従来のバインディングの欠点

1.伝統的な方法は、キャプチャや発泡ではなく、イベントの泡の中でのみ実行されます.2.一つの要素は一回に一つのイベントハンドリング関数だけを結びつけることができます.新しいバインディングのイベントハンドラは古いイベントハンドラ関数をカバーします.3.イベントオブジェクトパラメータ(e)はIEブラウザ以外でのみ利用可能です.
W 3 C方式element.addEventListener('click', function(e){ // ... }, false);

W 3 Cバインディングの利点1.この方法は、イベント処理のトラッピングと発泡段階を同時にサポートする.イベント段階は、addEventListenerの最後のパラメータ設定に依存します.false(発泡)またはtrue(捕獲).2.イベント処理関数の内部で、thisキーワードは現在の要素を参照します.3.イベントオブジェクトは、常に処理関数の最初のパラメータ(e)で取り込まれます.4.同じ要素のために、以前に結合されたイベントをカバーしないで、あなたが望む複数のイベントをバインドすることができます.

W 3 Cバインディングの欠点1.IEはサポートされていません.代わりにIEのatachEvent関数を使用しなければなりません.

IEモードelement.attachEvent('onclick', function(){ // ... });

IE方式の利点1.同じ要素のために、以前に結合されたイベントをカバーすることなく、所望の複数のイベントをバインドすることができる.

IE方式の欠点1.IEは、イベントトラッピングのバーストステージのみをサポートする.2.イベント傍受関数内のthisキーワードは、現在の要素(IEの大きな欠点)ではなく、windowオブジェクトを指しています.3.イベントの対象はwindow.eventパラメータのみに存在します.4.イベントはclickではなくontypeの形で命名しなければならない.5.IEのみが利用可能です.IEブラウザではなくW 3 CのaddEventListenerを使用しなければなりません.

Dean Edwardsの方案(addEvent/removeveveveveveventライブラリ)function addEvent(elementment, type, handler) { // ID if(!handler.$$guid) handler.$$guid = addEvent.guid++; // if(!elementment.events) elementment.events = {}; // / var handlers = elementment.events[type]; if(!handlers) { handlers = elementment.events[type] = {}; // ( ) if(elementment["on" + type]) { handlers[0] = elementment["on" + type]; } } // handlers[handler.$$guid] = handler; // elementment["on" + type] = handleEvent; } // ID addEvent.guid = 1; function removeEvent(elementment, type, handler) { // if(elementment.events && elementment.events[type]) { delementte elementment.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.$$handerEvent = handlers[i]; if(this.$$handlerEvent(event) === fasle) { returnValue = false; } } return returnValue; } // IE 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; }

addEventの利点1.すべてのブラウザで動作することができます.より古くてサポートされていないブラウザでも、2.thisのキーワードはすべてのバインディング関数で使用できます.現在の要素の中で、ブラウザのデフォルトの挙動を防ぐすべてのブラウザの特定の関数を指します.イベントオブジェクトは常に最初のオブジェクトとして

に入る.

addEventの欠点1.発泡段階でのみ動作する(イベントバインディングを深く使用する従来の方法のため)

.