JavaScript イベントストリームとイベントハンドラーを学ぶ_JavaScript のヒント-jsチュートリアル-php.cn

JavaScript イベントストリームとイベントハンドラーを学ぶ_JavaScript のヒント

WBOY

リリース： 2016-05-16 15:18:22

オリジナル

1077 人が閲覧しました

この記事では、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 イベントストリームとイベントハンドラーに関するものであり、皆さんの学習に役立つことを願っています。