JavaScript イベントのいくつかの詳細

1. キャプチャですか、それともバブリングですか? 昨日、「イベントの流れは何段階ありますか?」という質問がありました。これらの段階でイベントは何回発生しましたか?

質問は非常に簡単ですが、イベントが何回発生したかについては少しわかりにくいです。いつも思うのですが、捕獲でもイベントが発生するし、バブリングでもイベントが発生するのですが、そのイベントは一度しか発生しませんでした！したがって、これをよく知っている学生は読み飛ばしていただいても構いません。

サブ質問 1: イベントの流れは何段階ありますか?

「DOM2 レベルのイベント」で指定されるイベント フローには、イベント キャプチャ ステージ、ターゲット ステージ、イベント バブリング ステージの 3 つのステージが含まれます。

1. IE9 より前の IE ブラウザは、最後の 2 つのステージ、つまりターゲット ステージとイベント バブリング ステージのみをサポートします。このシーケンスは、最も深いネスト レベルのノードでイベントが受信され、段階的に親ノードに伝播されることを理解するのが簡単です。

2. 初期の Netscape チームによって提案されたもう 1 つのイベント ストリームは、イベント キャプチャと呼ばれます。つまり、トップレベルのノードはイベントをより早く受信し、最も深いネスト レベルのノード、つまりイベント キャプチャ ステージとターゲット ステージに徐々に伝播する必要があります

3 などの最新のブラウザー。など 3 つのステージ全体をサポートします。

サブ質問 2: これらの段階でインシデントは何回発生しましたか?

イベントが発生すると、「DOM2 レベルのイベント」のイベント フローは 3 つの段階 (キャプチャ -> ターゲット -> バブリング) を経ますが、すべての段階が発生するわけではありません。ノードの場合、addEventListener メソッドの 3 番目のパラメーターが true の場合、イベントはキャプチャ フェーズで発生し、false の場合、イベントはバブリング フェーズで発生します。つまり、イベントは一度だけ発生しました！

外部ノードがキャプチャフェーズとバブリングフェーズの両方でイベントを生成したい場合は、それを 2 回登録します。

ちなみに、「DOM レベル 0 イベント」(elem.onclick = function () {…}) にもイベント バブリングがあります。

2. イベントの登録順序

同じノードに複数のイベントを登録します。

発生順序はイベント追加の順序に基づきます

attachEvent を使用します。発生は逆です 来られた方、後から登録された方が先に発生します。

3. イベントを削除する

イベントを削除するメソッドremoveEventListenerとdetachEventはイベント発生時の同じコールバック関数のため、イベント登録時の匿名関数の使用は削除できません。