ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript イベント ストリームとイベント ハンドラーを学ぶ_JavaScript のヒント
JavaScript イベント ストリームとイベント ハンドラーを学ぶ_JavaScript のヒント
- WBOYオリジナル
- 2016-05-16 15:18:221098ブラウズ
この記事では、JavaScript イベント フローとイベント ハンドラーを全体的に紹介し、参考として共有します。
1. イベントの流れ
イベント フローは、ページから受信したイベントのシーケンスを記述します。 IE のイベント フローはイベント バブリング フローですが、Netscape Communicator のイベント フローはイベント キャプチャ フローです。
2. イベントバブリング
つまり、イベントは最初に最も具体的な要素によって受信され、その後、より具体的なノードに上向きに伝播します。例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div>Click</div> </body> </html>
ページ内の div 要素がクリックされると、クリック イベントは次の順序で伝播されます:
- div 要素
- ボディ要素
- html 要素
- ドキュメントオブジェクト
3. イベント攻略
イベント キャプチャの考え方は、最も特定的なノードが最後にイベントを受信する必要があるということです。イベント キャプチャの目的は、ターゲットに到達する前にイベントをキャプチャすることです。
ページ内の div 要素がクリックされると、クリック イベントは次の順序で伝播されます:
- ドキュメントオブジェクト
- HTML タグ
- ボディタグ
-
div タグ
仕様ではイベントがドキュメント オブジェクトから伝播される必要があるとされていますが、ブラウザは通常、ウィンドウ オブジェクトからイベントのキャプチャを開始します。古いバージョンのブラウザではサポートされていないため、通常はイベント バブリングが使用されます。
4. DOM イベントの流れ
「DOM2 レベルのイベント」で指定されるイベント フローには、イベント キャプチャ ステージ、ターゲット ステージ 、および イベント バブリング ステージ の 3 つのステージが含まれます。
DOM イベント ストリームでは、実際のターゲットはキャプチャ フェーズ中にイベントを受信しません。つまり、キャプチャ フェーズ中、イベントはドキュメントから HTML、そして本文に移動した後に停止します。次のフェーズは「ターゲット通り」フェーズです。このフェーズでは、イベントが div 内で発生し、イベント処理におけるバブリング フェーズの一部とみなされます。次に、バブリング段階が発生します。 IE8 以前のバージョンでは DOM イベント ストリーミングがサポートされていないため、ブラウザはキャプチャ フェーズ中にイベント オブジェクトでイベントをトリガーします。その結果、ターゲット オブジェクトでイベントを操作する機会が 2 つあります。
5. イベントハンドラー
イベントはユーザーまたはブラウザ自体によって実行される特定のアクションであり、イベント ハンドラー (またはイベント リスナー) はイベントに応答する関数です。イベント ハンドラーの名前は、onload、onclick など、「on」で始まります。
6. HTML イベントハンドラー
ボタンがクリックされたときに js コードを実行するには、次のように記述できます:
<div onclick="alert('Clicked')">Click</div>
注: エスケープされていない HTML 構文文字は内部で使用できません。
ページ内の他の場所で定義されたスクリプトを呼び出すこともできます:
<script>
function showMessage () {
document.write("fdas");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
イベント ハンドラー内のコードは、実行時にグローバル スコープ内の任意のコードにアクセスできます。
これを使用すると、要素の属性値をカプセル化する関数が作成されます。この関数には、イベント オブジェクトであるローカル変数イベントがあります:
<input type="button" value="Click Me" onclick="alert(event.type)" />
ここで、this の値は、次のようなイベントのターゲット要素と等しくなります。
<input type="button" value="Click Me" onclick="alert(this.value)" />
HTML イベントハンドラーには問題が多いため、js で指定されたイベント ハンドラーを使用する必要があります
7. DOM レベル 0 イベント ハンドラー
js を使用してイベント ハンドラーを指定するには、まず操作対象のオブジェクトへの参照を取得する必要があります。
各要素には独自のイベント ハンドラー属性があり、通常はすべて小文字です (onclick など)。例:
<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
console.log("hello");
}
</script>
DOM レベル 0 メソッドを使用して指定されたイベント ハンドラーは、要素のメソッドとみなされます。したがって、この時点のイベント ハンドラーは要素のスコープ内で実行されます。つまり、これは現在の要素を参照します:
<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
console.log(this.type);
}
</script>
この方法で追加されたイベント ハンドラーは、イベント フローのバブリング フェーズ中に処理されます。
DOM レベル 0 メソッド経由で指定されたイベント ハンドラーを削除します:
btn.onclick = null;
8. DOM2 レベルのイベント ハンドラー
addEventListener()
このメソッドは、処理されるイベント名、イベント ハンドラー関数、およびブール値の 3 つのパラメーターを受け取ります。ブール値が true の場合は、キャプチャ ステージでイベント ハンドラーを呼び出すことを意味します。バブリングステージハンドラーでイベントを呼び出します。例:
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
次のような複数のイベント ハンドラーをボタンに追加することもできます。
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
btn.addEventListener("click", function () {
console.log(this.value);
})
removeEventListener()
var btn = document.getElementById("btn");
function info () {
console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效
ほとんどの場合、さまざまなブラウザーとの互換性を最大限に高めるために、イベント ハンドラーはイベント フローのバブリング フェーズに追加されます。
上記はすべて JavaScript イベント ストリームとイベント ハンドラーに関するものであり、皆さんの学習に役立つことを願っています。