DOM_DOM でのイベント処理の概要

このインターフェイスは、EventListeners インターフェイスを EventTarget にバインドまたはバインド解除するための「addEventListener」および「removeEventListener」メソッドを提供します。

DOM 2 Events は、イベント コンテキスト情報を提供する Event インターフェイスを定義し、いくつかの標準プロパティとメソッドを提供します。 Event インターフェイスを実装するオブジェクトは通常、最初のパラメーターとしてイベント処理関数に渡され、現在のイベントに関連する情報を提供します。

イベント登録
DOM 2 イベントの説明によると、ノードは「addEventListener」および「removeEventListener」メソッドを使用してイベント リスナーのバインドおよびバインド解除を行いますが、IE6 IE7 IE8 はこれら 2 つのメソッドをサポートしていません。 'attachEvent' メソッドと 'detachEvent' メソッドを代替として使用します。Opera は両方のメソッドをサポートします。 Chrome Safari Firefox は標準の方法のみをサポートします。

ブラウザの互換性の問題を解決するために、機能をカスタマイズして解決できます。例:

コードをコピー コードは次のとおりです:

var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false) {
} else if (element.attachEvent); >element.attachEvent ("on" タイプ, ハンドラー);
} else {
element["on" type] = ハンドラー;
}
},
removeHandler: function (要素, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on " type, handler );
} else {
element["on" type] = null;
}
}
};

「addEventListener」について 「attachEvent」には注意すべき点がいくつかあります。

IE はキャプチャ フェーズでのイベント リスナーのトリガーをサポートしていません。また、「attachEvent」メソッドはイベントに応答するかどうかを示すパラメーターを提供しません。
'addEventListener' と 'attachEvent' は複数のイベント リスナーを登録できます。
Firefox Chrome Safari Opera で同じイベント リスナーを複数回登録すると、重複した登録は破棄されます。
同じ要素に複数のイベントリスナーが登録されている場合、IE6 IE7 ではイベントリスナーの実行順序はランダム、IE8 では逆になります。 、および Firefox Chrome Safari Opera はシーケンシャルです。
要素によって登録されたイベント リスナーに不正なイベント リスナー (非関数) がある場合、IE Firefox では例外がスローされますが、Chrome Safari Opera では不正なイベント リスナーが発生します。イベント リスナーは無視され、他のイベント リスナーの実行は続行されます。
イベント オブジェクト
IE では、イベント オブジェクトはグローバル変数として保存および維持されます。 すべてのブラウザ イベントは、ユーザーによってトリガーされたか、他のイベントによってトリガーされたかに関係なく、window.event オブジェクトを更新します。 したがって、コードでは、window.event を呼び出すだけでイベント オブジェクトを簡単に取得でき、その後、event.srcElement を使用して、さらなる処理のためにイベントをトリガーした要素を取得できます。

標準の DOM 処理の場合、イベント オブジェクトはグローバル オブジェクトではなく、オンサイトで発生し、対応するイベント処理関数に自動的に渡されます。 コードでは、関数の最初のパラメータはイベント オブジェクトです。

互換性の問題を解決するには、通常、コード内で次のように処理されます:

コードをコピーコードは次のとおりです。

関数ハンドラー(e){
e = e ||
}


イベント登録にButton 1を使用する場合、イベント処理メソッドではイベントオブジェクトを取得できないことに注意してください。標準的な方法。

その理由は、onclick="foo()" が foo() 関数に渡されるパラメーターを持たないためです。

この問題を解決するには 2 つの方法があります。

まず、登録メソッドを button に変更します。ここでのイベントは正式なパラメータではないことに注意してください。は実際のパラメータであり、event という名前を付ける必要があります。このようにして、foo 関数はイベント パラメータを取得できます。

2 番目に、登録されたコードを変更せず、イベント処理メソッドで処理します。重要なのは、この時点でイベント オブジェクトが実際に存在することですが、foo 関数を呼び出す関数が見つかることは問題ではありません。 foo.caller.Function を通じて foo 関数の現在の呼び出しを取得できます。この関数の最初のパラメータはイベント オブジェクトなので、次のようにイベント オブジェクトを取得できます。 foo.caller.arguments[0]。

注:

attachEvent メソッドを使用してイベント リスナーを登録する場合にのみ、IE はイベント リスナーによって渡された最初のパラメーターをイベント オブジェクトとして使用することをサポートします。
Firefox はイベント オブジェクトを取得する標準的な方法のみをサポートします。
イベント オブジェクトの属性
IE では、イベント オブジェクトの標準の属性とメソッドのサポートが制限されていますが、Firefox、Chrome、Safari Opera、完全なサポートに加えて、イベント オブジェクトの標準プロパティとメソッドに加えて、IE が提供する非標準の代替手段もさまざまな程度でサポートします。

標準に対応する非標準のメソッドやプロパティを特性で判断して使用する

target srcElement

preventDefault() returnValue

stopPropagation() cancelBubble

relationshipTarget fromElement toElement

例:

コードをコピー コードは次のとおりです。

getEvent: 関数 (イベント) {
イベントを返す : window.event;
},
getTarget: 関数 (イベント) {
イベントを返す|| イベント.srcElement;
},
preventDefault: 関数 (イベント) {
if (event.preventDefault) {
event.preventDefault(); else {
イベント.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation(); else {
event.cancelBubble = true ;
}
}



参照:

SD9011: イベント モデルはブラウザごとに異なります