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

「イベント発火時の処理を設定する方法」「イベント伝播の制御方法」など、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 で確認できます。

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

onclickプロパティの注意点

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

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

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

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

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

以下に例を示します。