JavaScript domイベントオブジェクトとIEイベントオブジェクトインスタンスの詳細説明

Event オブジェクト: DOM 上のイベントがトリガーされると、イベント オブジェクト イベントが生成されます。このオブジェクトには、イベントを引き起こした要素、イベントのタイプなど、イベントに関連するすべての情報が含まれます。特定のイベントに関する情報。

DOM

DOM 互換ブラウザーのイベント オブジェクトは、イベント ハンドラーの指定に DOM0 メソッドが使用されるか DOM2 メソッドが使用されるかに関係なく、イベントはオブジェクトで渡されます。 。イベント オブジェクトは、イベント ハンドラーの実行中にのみ存在します。イベント ハンドラーの実行が完了すると、イベント オブジェクトは破棄されます。以下にコード例を示します。

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
 console.log(event.type);
}, false);

イベント オブジェクトには、それを作成した特定のイベントに関連するプロパティとメソッドが含まれています。トリガーされるイベントの種類は異なり、使用可能なプロパティ メソッドも異なります。ただし、すべてのイベントには次のプロパティまたはメソッドがあります:

• bubbles: イベントがバブルするかどうかを示すブール値

• cancelable: イベントのデフォルトの動作をキャンセルできるかどうかを示すブール値

• currentTarget : 要素、イベント ハンドラーが現在イベントを処理している要素

• defaultPrevented: ブール値、preventDefault() メソッドが呼び出されているかどうかを示します

• detail: 整数、イベントに関連する詳細情報

• eventPhase: 整数、イベント ハンドラーを呼び出すステージ、1 はキャプチャ ステージを表し、2 はターゲット ステージを表し、3 はバブリング ステージを表します

• preventDefault(): 関数、イベントのデフォルトの動作をキャンセルします、このメソッドcancelable が true の場合に呼び出すことができます

• stopImmediatePropagation(): 関数、イベントのさらなるキャプチャまたはバブリングをキャンセルし、イベント ハンドラーが呼び出されないようにします

• stopPropagation(): 関数、イベントのさらなるキャプチャまたはバブリングをキャンセルします、このメソッドは、バブルが true の場合に呼び出すことができます

• target: 要素、イベントのターゲット

• tru​​sted: ブール値、true の場合、イベントがブラウザによって生成されたことを意味し、それ以外の場合はイベントを意味しますJS を通じて作成されました

• type: 文字列、トリガーされたイベントタイプ

• view: イベントに関連付けられた抽象ビュー。イベントが発生したウィンドウオブジェクトに相当します

次のコード例は、上記の属性のいくつかの使用法は、イベント フローをさらに理解するのにも役立ちます。ページ上に「myBtn」というボタンがあるとします。ボタンがクリックされると、イベント ハンドラーが body 要素に登録されるため、this と currentTarget は両方とも body 要素と等しくなります。 target の値は button 要素と等しくなります。これは、それがクリック イベントの実際のターゲットであるためです。ボタンにはイベント ハンドラーが登録されていないため、「クリック」イベントは処理される前に document.body にバブルアップされます。

document.body.onclick = function(event) {
 console.log(event.currentTarget === document.body); // true
 console.log(this === document.body); // true
 console.log(event.target === document.getElementById("myBtn")); // true
};

別の例を見てください。以下のコードでは、stopPropagation() メソッドがそれ以降のイベントのキャプチャまたはバブリングをキャンセルします。ボタンをクリックすると、イベント バブリング メカニズムによりボタン要素とボディ要素のクリック イベント ハンドラーがトリガーされ、「From Bth...」と「From Body...」が出力されます。これで、クリック イベントはボタン要素で起動された後、DOM 階層内でさらに伝播することがブロックされるため、本体のイベント ハンドラーは起動されません。

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log("From Bth ...");
 event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
 console.log("From Body ...");
};

IEのイベントオブジェクト

IEでは、DOM0メソッドを使用してイベントハンドラーを追加すると、イベントオブジェクトはウィンドウオブジェクトのプロパティとして存在します。 AttachEvent() メソッドを通じて追加された場合、イベント オブジェクトはパラメーターとしてイベント処理関数に渡されます。以下はコード例です。

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 var event = window.event;
 console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
 console.log(event.type); // "click"
});

IE のイベント オブジェクトには、それを作成したイベントに関連するプロパティとメソッドも含まれています。これらのプロパティとメソッドもイベントの種類によって異なります。ただし、すべてのイベント オブジェクトには次のプロパティが含まれます:

• cancelBubble: ブール値。読み取りおよび書き込み可能。デフォルトは false です。 true に設定するとイベント バブリングをキャンセルします

• returnValue: ブール値、読み取りおよび書き込み可能、​​デフォルトは true です。イベントのデフォルト動作をキャンセルするには false に設定します

• srcElment: 要素、イベントのターゲット要素、DOM のターゲット属性と同じです

• type: string、イベントタイプ

IE では、イベント ハンドラーのスコープは指定方法によって決まり、this の値は必ずしもイベントのターゲット要素を指すわけではありません。したがって、srcElement 属性を使用する方が安全です。以下のコード例を見てください。最初のメソッドでは this の値がターゲット要素です。2 番目のメソッドでは、前述したように、このメソッドのイベント ハンドラーはグローバル スコープで実行されるため、this の値は次のようになります。窓です。

りー

以上がJavaScript domイベントオブジェクトとIEイベントオブジェクトインスタンスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。