はじめに
本記事はイベントとイベントリスナーの続きの記事になります。
イベントが発生した際に、どの要素でどのようなイベントが発生したのかなどの情報を含むオブジェクトである、イベントオブジェクトについてみていきます。
イベントオブジェクトとは
イベントオブジェクトとは、発生したイベントに関する情報をもつオブジェクトです。
イベントが発生するとブラウザによって生成され、windowオブジェクト、documentオブジェクト、その配下のオブジェクト... という順でイベントが発生した要素へと渡されていきます1。
イベントオブジェクトに含まれるプロパティ
イベントオブジェクトに含まれる主なプロパティとしては以下のようなものがあります。
type
typeは発生したイベントの種類を表す文字列で、clickやkeydownなどの値を持ちます。
addEventListenerの第1引数に設定した文字列とtypeが同じときに設定したイベントハンドラーが呼び出されます。
target
targetはイベントが発生した要素への参照をもちます。
targetにどのような情報が含まれるかは、console.dir()を使うと詳細に確認することができます2。
const btn = document.getElementById("btn");
btn.addEventListener("click", (e) => {
console.dir(e.target);
});
currentTarget
currentTargetには現在イベントを処理している要素の参照がはいっています。
キャプチャリングやバブリングによってイベントの発生源ではない要素でもイベントが処理されることがあり、その場合にtargetとcurrentTargetの値が異なることになります。
bubbles
bubblesにはboolean値がはいっており、バブリングが起こる場合にはtrue、起こらない場合にはfalseをとります。
cancelable
cancelableにはboolean値がはいっており、イベントがキャンセル可能かを表します3。
clickやsubmitなどはキャンセル可能なため、trueが格納されていますが、loadやDOMContentLoaded、scrollはキャンセルができないため、falseが格納されています。
eventPhase
eventPhaseにはどのフェーズで処理がされているかを表す数値が格納されています。
各数値はそれぞれ以下に対応しています。
0: NONE
1: CAPTURING_PHASE
2: AT_TARGET
3: BUBBLING_PHASE
イベントオブジェクトに含まれるメソッド
preventDefault()
preventDefault()を呼び出すことで、デフォルトの動作を無効化することができます。
submitイベントでの通常のフォーム送信を停止したり、リンクのclickイベントで通常のページ遷移を抑止するためなどに使用できます。
stopPropagation()
stopPropagation()を呼び出すことで、イベントの伝播を止めることができます。
例えばキャプチャフェーズで呼び出されたときには、続くターゲットフェーズ、バブリングフェーズでの伝播も起こらなくなります。
同じ要素に複数のイベントリスナーが設定されている時には、stopPropagation()が呼び出されても、その要素に設定されたイベントリスナーによる処理は全て実行されます。
stopImmediatePropagation()を呼び出した場合には、同じ要素のイベントリスナーであっても呼び出し以降の処理については行われなくなります。