イベント操作する上で押さえておきたいポイント

「イベント発火時の処理を設定する方法」「イベント伝播の制御方法」など、JavaScriptによるイベント操作で押さえておきたいポイントについて紹介します。

イベントの種類

非常に多くのイベントが存在します。利用する機会がありそうなイベントを列挙します。

  • リソースイベント
    • load
    • unload
  • フォーカスイベント
    • focus
    • blur
  • トランジションイベント
    • transitionstart
    • transitioncancel
    • transitionend
    • transitionrun
  • フォームイベント
    • reset
    • submit
  • ビューイベント
    • resize
    • scroll
  • キーボードイベント
    • keydown
    • keypress
    • keyup
  • マウスイベント
    • click
    • dblclick
    • mouseenter
    • mouseover
    • mousemove
    • mousedown
    • mouseup
    • mouseleave
    • mouseout
  • ドラッグ & ドロップイベント
    • dragstart
    • drag
    • dragend
    • dragenter
    • dragover
    • dragleave
    • drop

詳しくは、https://developer.mozilla.org/ja/docs/Web/Events#Standard_events で確認できます。

イベント発火時の処理を設定

おすすめしない書き方

<input
  id='xxx'
  type="button"
  value="click"
  onclick='alert("Hello World")'>

上記のように、onclick などのイベントハンドラで処理を設定することができます。

const btn = document.getElementById('xxx')
btn.onclick = () => alert('Good Bye')

また、上記のように onclickプロパティ で処理を設定することもできます。

これらの書き方は、オススメしない書き方です。なぜなら、ある要素の特定のイベントに対して、複数の処理を登録することができないからです。

以下に例を示します。

2箇所でイベントを登録していますが、clickボタン をクリックしてもアラートが1度しか表示されません。

addEventListenerでイベントを登録

今度は、 addEventListener でイベントを登録してみます。こちらの場合、複数のイベントを設定できます。

clickボタン をクリックして、アラートが2度表示されることを確認できます。

addEventListenerの使い方
下記ページで確認できます。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

イベントの実行を1回だけに限定するなどの調整も可能です。useCaptureについては後述します。
addEventListenerで登録したイベントリスナーを削除するには?

イベントオブジェクト

addEventListenerの第2引数に、イベント発生時に実行させたい関数を設定します。

btn.addEventListener(
  'click', 
  e => alert('Hello World'),
  false
)

関数の引数( e )には、イベントに応じたイベントオブジェクトが渡されます。以下のような、イベントオブジェクトが存在します。

  • KeyboardEvent
    • 押されたキー情報を格納したプロパティなどが存在します。
  • MouseEvent
    • マウスポインタの位置情報を格納したプロパティなどが存在します。
  • DragEvent

全て、Eventインターフェイスを継承しています。

イベント伝播

発生順序調整
( キャプチャリングとバブリング )

607-javascript-event-propagation.png

最下位のdiv要素をクリックすると、windowから順にイベントが伝播されます。そして、最下位のdiv要素のイベントが実行されたのち、今度は最上位にイベントが伝播されます。

上位から下位にイベントが伝播される段階をキャプチャリングといい、下位から上位にイベントが伝播される段階をバブリングと言います。

キャプチャリング

addEventListenerの 第3引数true を指定すると、キャプチャリングのときにイベントが実行されます。

キャプチャリングの動作を確認します。

innerクラスのdiv領域をクリックすると、 outer eventinner event1inner event2 の順でイベントが発火していることを確認できます。

バブリング

addEventListenerの 第3引数false を指定すると、バブリングのときにイベントが実行されます。

バブリングの動作を確認します。

innerクラスのdiv領域をクリックすると、 inner event1inner event2outer event の順でイベントが発火していることを確認できます。

伝播を停止(同一要素は実行)
( stopPropagation )

stopPropagationメソッド を実行すると伝播を停止させることができます。ただし、同一要素のイベントは実行します。動作確認します。

チェックボックスをクリックしたときの動作は以下のようになります。

event 実行
inner event1
inner event2
outer event ×
ブラウザ本来の挙動
( チェックボックスにチェックがつく )

伝播を停止(同一要素も停止)
( stopImmediatePropagation )

stopImmediatePropagationメソッド を実行すると伝播を停止させることができます。ただし、同一要素のイベントも停止します。動作確認します。

チェックボックスをクリックしたときの動作は以下のようになります。

event 実行
inner event1
inner event2 ×
outer event ×
ブラウザ本来の挙動
( チェックボックスにチェックがつく )

ブラウザ本来の挙動のみ停止
( preventDefault )

preventDefaultメソッド を実行するとブラウザ本来の挙動のみ停止させることができます。動作確認します。

チェックボックスをクリックしたときの動作は以下のようになります。

event 実行
inner event1
inner event2
outer event
ブラウザ本来の挙動
( チェックボックスにチェックがつく )
×

カスタムイベントの作成方法
( EventコンストラクタとdispatchEvent )

Eventコンストラクタ でオリジナルのイベントを作成することができます。
作成したイベントは dispatchEvent で発火させることができます。

参考