JavaScript イベントのリスニング、キャプチャ、バブリング

フロントエンド開発では、特定のイベントを監視する必要があることがよくあります。このように、指定された要素でイベントがトリガーされる限り、コールバックが実行され、関連する操作が実行されます。

jsには次の3つのイベントリスニングメソッドがあります:

element.addEventListener(type,listener[,useCapture]); // IE6~8は

element.attachEvent('on' + type ,listener)をサポートしません。 ); // IE6~10、IE11は

element['on' + type] = function(){} // すべてのブラウザ

demo:

function cb() { console.log(1); }
element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

パラメータの意味:

type: イベントタイプ

listener: イベントがトリガーされた後のコールバック関数

useCapture: キャプチャを使用するかどうか 値が true の場合、useCapture はユーザーがキャプチャを開始したいことを示します。 キャプチャの開始後、イベント タイプが Dom サブツリーで発生する限り、最初にイベント リスナーによってキャプチャされ、次に Dom サブツリー内のイベント リスナーにディスパッチされます。また、バブルアップしたイベントは、キャプチャを開始するイベント リスナーをトリガーしません。詳細については、DOM レベル 3 イベントのドキュメントを参照してください。 useCapture のデフォルト値は false です。

addEventListener は、DOM レベル 2 の W3C ワーキング グループによって導入されたイベント リスナーを登録するメソッドです。それ以前は、従来のイベント リスニング メソッドは element['on' + type] を通じて登録されていました。これらの主な違いは、element['on' + type] はイベント キャプチャを使用できないこと、および element['on' + type] は同じ要素上の同じイベントに対する複数のイベント リスナーの登録をサポートしていないことです。以下の例に示すように、要素をクリックすると、1 のみが出力され、0 と 1 は出力されません。

element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }

ただし、addEventListener メソッドは IE6~8 ブラウザーではサポートされていません。では、IE の下位バージョンで同じイベントに対して複数のイベント リスナーを登録するにはどうすればよいでしょうか? IE では、IE5.0 シリーズ以降、この機能をサポートするためにattachEvent() メソッドが導入されていることがわかりました。ただし、残念ながら、この方法でもイベント キャプチャはサポートされていません。また、IE 11 以降、このメソッドは非推奨になりました。

イベント キャプチャとバブリングについて話しましょう

W3C 仕様では、キャプチャ フェーズ、ターゲット フェーズ、バブリング フェーズという 3 つのイベント フェーズが定義されています。イベント オブジェクトは、上図の伝播パスに従ってこれらのステージを順番に完了します。ステージがサポートされていない場合、またはイベント オブジェクトの伝播が終了した場合、ステージはスキップされます。たとえば、Event.bubbles プロパティが false に設定されている場合、バブリング フェーズはスキップされます。イベントが送出される前に Event.stopPropagation() が呼び出された場合、すべてのステージがスキップされます。

キャプチャ フェーズ: イベント オブジェクトがイベント ターゲットに到達する前に、イベント オブジェクトはウィンドウからターゲットの祖先ノードを介してイベント ターゲットに伝播される必要があります。 この段階はキャプチャ段階と呼ばれます。この段階で登録されたイベント リスナーは、イベントがターゲットに到達する前にイベントを処理する必要があります。

目標フェーズ: イベント オブジェクトはイベント目標に到達します。 この段階をゴール段階と呼びます。イベント オブジェクトがイベント ターゲットに到達すると、この段階のイベント リスナーがそれを処理します。イベント オブジェクト タイプが非バブリングとしてマークされている場合。この段階に達すると、対応するイベント オブジェクトは伝播を終了します。

バブル ステージ: イベント オブジェクトは、イベント ターゲットからその祖先ノードを介してキャプチャ ステージとは反対方向のウィンドウに伝播します。この段階をバブリング段階と呼びます。この段階で登録されたイベント リスナーは、対応するバブリング イベントを処理します。

イベントが伝播パスのすべてのステージを完了すると、Event.currentTarget は null に設定され、Event.eventPhase は 0 に設定されます。イベントの他のすべてのプロパティは変更されません (イベント ターゲットを指す Event.target プロパティを含む)