JavaScript学習ノート(15)_基礎知識

イベント
イベントは DOM (ドキュメント オブジェクト モデル) の一部です。イベント フローは、イベントが発生する順序です。これが、IE と他のブラウザーのイベント サポートの主な違いです。
1. イベント フロー
1. バブリング イベント
IE での解決策は、最も具体的なターゲットから最も具体的でないイベント ターゲットに移動することです。ドキュメント オブジェクト) は順次トリガーされます。
プロセス: DOM 階層に従い、バブルのように最上位に上昇し続けます。 (イベントを内部の div からトリガーし、次に本文、HTML、最後にドキュメントの先頭にトリガーします)。
2. イベントのキャプチャ
これは、バブリングの正反対であると言えます。イベントは、最も精度の低いオブジェクトからトリガされ、次に最も正確になるまで発生します。
3. DOM イベント フロー
DOM は、最初にドキュメント オブジェクトから始まり、最後にドキュメント オブジェクトで終了する、上記の 2 つのイベント モデルをサポートします。
2. イベントリスニング関数
1. IE
各関数とウィンドウオブジェクトには 2 つのメソッドがあります:
attachEvent() メソッド: イベント処理関数
[オブジェクト] .attachEvent("イベント名", ハンドラー関数 fnHandler);
このメソッドには 2 つのパラメーターがあります。
var fnClick = function() {
alert("ID div1 の DIV をクリックしました");
}
var oDiv = document.getElementById("div1"); .attachEvent("onclick", fnClick);
複数のハンドラー関数をアタッチできます。
detachEvent() メソッド: イベント ハンドラー関数を切り離して削除します。
2. DOM
addEventListener() メソッド: 追加のイベント ハンドラー関数を割り当てます。
[オブジェクト]。addEventListener ("イベント名"、ハンドラー関数) fnHandler , Boolean);
このメソッドには 3 つのパラメータ (「イベント名」、「割り当てられた関数」、処理関数がバブリングフェーズかキャプチャフェーズか) があります。
イベント処理関数がキャプチャ フェーズ、3 番目 最初のパラメータは true で、バブリング ステージで使用される場合は false になります。 var oDiv = document.getElementById("div ");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);複数のハンドラー関数。
removeEventListener() メソッド: イベント処理関数

を削除します。3. イベント オブジェクト

には、次の 3 つの側面の情報が含まれます。
1. イベントを引き起こすオブジェクト: IE では、それは window です。event は DOM の処理関数の唯一のパラメータです。
2. イベント発生時のマウス情報。
3. イベント発生時のキーボード情報。 IE イベント オブジェクト
IE では、イベント オブジェクトはウィンドウ オブジェクトの属性イベントです。つまり、イベント ハンドラー関数は次のようにイベント オブジェクトにアクセスする必要があります。 oDiv.onclick = function() { var oEvent = window.event }oDiv.onclick = function(){ var oEvent = window.event; ;}
ウィンドウオブジェクトのプロパティではありますが、イベントオブジェクトはイベント発生時のみアクセス可能です。すべてのイベント処理関数は実行後に破棄されます。
DOM 標準イベント オブジェクト
イベント オブジェクトは、唯一のパラメーターとしてイベント処理関数に渡す必要があります。したがって、DOM 互換ブラウザ (Mozilla、Safari、Opera など) でイベント オブジェクトにアクセスするには、次のようにします。 }
//これも行うことができます
oDiv.onclick = function(oEvent) {
//....
}