フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(DOM)イベントの登録 - addEventListener

スクリプト側から各ノードにイベントを登録できるaddEventListenerの使用法を自分用のメモとしてまとめておきます。

addEventListener( type, listner, useCapture )

引数について
type
イベントのタイプです。DOMで使用できるイベント名から「on」と取り除いた名前で指定します。
onclick → click
onmousedown → mousedown
onload → load
listener
関数を登録します。functionキーワードを使って登録した場合は、自動で引数にEventオブジェクトが入ってくるので、function(e)とすれば関数内でeを使うことが出来るようになります。また、別な場所で定義した関数を持たせることも可能です。
useCapture
イベント伝播の方法をboolで指定します。デフォルトはfalseでバブリング方式になっていて、trueでキャプチャリング方式になります。
バブリング(false、default)
イベントが発生したノードの処理を最初に行い、イベントがノードのルートに向かって伝播していきます。
キャプチャリング(true)
ルートノードで最初にイベントの処理を行い、イベントが発生したノードに向かって伝播し、最後にイベントが発生したノードの処理を行います。
以下のサンプルはtestというidを持つノードをクリックするとアラートが表示され、親ノードに向かってonlickが伝播していきます
test.addEventListener('click', function(event){alert(event)}); // 第三引数は省略でfalseになる
主なプロパティ

引数に関数を登録する場合に、引数としてeventオブジェクトを持たせることが出来ます。eventオブジェクトは色々なプロパティを持っています。以下は使用できる主なプロパティです。

type
イベントの種類を表示します。addEventListerの第一引数と同じものです。
target
イベント発生元のエレメントです。
currentTarget
現在イベントが動作しているエレメントです、伝播している時の確認に使えます。
eventPhase
現在動作しているイベントが、どのフェーズかを調べます。
  1. CAPTURING_PHASE
  2. AT_TARGET
  3. BUBBLING_PHASE
timeStamp
イベント発生時刻です
キャプチャリング(バブリング)の中止

キャプチャリングやバブリングを中止する場合は、登録した関数の中でstopPropagation()メソッドを使用します。

event.stopPropagation();