JavaScript イベント_JavaScript スキルに関する簡単な説明

1. イベントの流れ

イベント フローは、ページからイベントを受信する順序を説明します。ただし、IE が提案するのはバブリング ストリームですが、Netscape Communicator はキャプチャ ストリームを提案します。
JavaScript イベントストリーム

2. イベントバブリング

イベントは、最初に最も具体的な要素 (最も深いネスト レベルを持つノード) によって受信され、次に、より具体的ではないノード (ドキュメント) に上方に伝播します。以下のように:

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

<頭>
                                                                                                                                                                                                                       

クリックしてください

window.onload = function(){
var obj = document.getElementById("テスト");
obj.onclick = function(){
アラート(this.tagName);
};
Document.body.onclick = function(){
アラート(this.tagName);
};
Document.documentElement.onclick = function(){
アラート(this.tagName);
};
Document.onclick = function(){
アラート("ドキュメント");
};
window.onclick = function(){
alert("ウィンドウ");
}
};

イベント伝播シーケンス: div——>body——>html——>document

注:

最新のブラウザはすべてバブリング イベントをサポートしていますが、実装にはいくつかの違いがあります。 IE5.5 以前のバージョンのイベント バブリングは、本文からドキュメントに直接ジャンプします (html は実行されません)。 Firefox、Chrome、および Safari は、イベントをウィンドウ オブジェクトまでバブルします。

3. イベントのバブリングを停止し、デフォルトのイベントをキャンセルします

a. イベントオブジェクトを取得します

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

関数 getEvent(event) {
// window.event IE
// IE 以外のイベント
イベントを返す || window.event;
}

b 機能: イベントバブリングを停止

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

関数 stopBubble(e) {
// イベント オブジェクトが提供されている場合、これは非 IE ブラウザです
if ( e && e.stopPropagation ) {
// したがって、W3C の stopPropagation() メソッドをサポートします
e.stopPropagation();
} else {
// それ以外の場合は、IE を使用してイベントのバブリングをキャンセルする必要があります
window.event.cancelBubble = true;
}
}

c. ブラウザのデフォルト動作をブロックします

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

function stopDefault( e ) {
// デフォルトのブラウザーアクションをブロックします (W3C)
If ( e && e.preventDefault ) {
e.preventDefault();
} else {
//IEで関数のデフォルト動作を防ぐ方法
window.event.returnValue = false;
}
false を返します;
}