イベントリスナー

Javascriptのイベントリスナーについてまとめました。

イベントリスナーとは

『要素がクリックされた』『キーボードのキーが押下された』といった、
出来事（イベント）を契機に実行される関数のことです。
構文は下記の通りです。

対象要素.addEventListener('イベント名', 関数, オプション);

『対象要素』で『イベント』が発生した時に『関数』を実行します。

Javascriptの要素には下記イベントが用意されています。

イベント名実行タイミング
auxclickポインティングデバイス（マウスなど）の第一ボタン（左クリックなど）以外を押し、離した時
blurフォーカスを外した時
clickポインティングデバイスの第一ボタンを押し、離した時
compositionendIMEなどによる全角テキスト入力を確定／キャンセルした時
compositionstartIMEなどによる全角テキスト入力を開始した時
compositionupdateIMEなどによる全角テキスト入力を更新した時
contextmenuコンテキストメニュー（windowsの右クリックメニューなど）を開こうとした時
copyクリップボードにコピーしようとした時
cutクリップボードに切り取ろうとした時
dblclickポインティングデバイスの第一ボタンをダブルクリックした時
error何かしらエラーが発生した時（スクリプトの実行エラー、画像の読み込みエラーなど）
focus対象要素をフォーカスした時
focusin対象要素をフォーカスした時（子要素をフォーカスしても実行する）
focusoutフォーカスを外した時（子要素のフォーカスが外れても実行する）
fullscreenchange全画面モードに切り替えたり、終了したりした時
fullscreenerror全画面モードへの切り替えや終了時にエラーになった時
※発動条件が分からなかったのでサンプルは割愛。。。
keydownキーボードのキーを押下した時
keyupキーボードのキーを離した時
mousedownポインティングデバイスのいずれかのボタンを押下した時
mouseenterポインティングデバイスのカーソルを要素に乗せた時
mouseleaveポインティングデバイスのカーソルを要素から離した時
mousemoveポインティングデバイスのカーソルを要素上で動かした時
mouseoutポインティングデバイスのカーソルを要素から離した時（子要素内であれば実行しない）
mouseoverポインティングデバイスのカーソルを要素に乗せた時（子要素に乗せた時も実行する）
mouseupポインティングデバイスのいずれかのボタンを離した時
pasteクリップボードから貼り付けようとした時
scrollスクロールした時
securitypolicyviolationコンテンツセキュリティポリシー（Content Security Policy、CSP）に違反した時
selectinput及びtextarea要素の文字列を選択した時（shift+←→やマウスでの選択）
touchcancelタッチ操作を中断した時
touchendタッチ操作を完了（指を離したなど）した時
touchmoveタッチしたまま移動した時
touchstartタッチ操作を開始（指で触れたなど）した時
wheelポインティングデバイスのホイールボタンを回転した時

『オプション』には下記のいずれかが設定できます。

  • options
    　capture：下記useCaptureと同様
    　once　 ：trueを指定すると、イベントの実行を1度限りにできる
    　passive：trueを指定すると、イベント発生元のデフォルト動作を
    　　　　　　キャンセル不可（＝preventDefault()を実行できない）にする
    　signal　：実験的な項目のようなので割愛
  • useCapture：trueを指定すると、親要素の同種イベントを発生させる

※対応しているブラウザはoptionsが指定でき
　していないブラウザはuseCaptureで指定する
　（optionsの形式で指定するとtrueになってしまうため注意）

他にも上記とは別に『wantsUntrusted』という引数が指定できますが、
実験的なもののようなので割愛します。詳細は下記をご覧ください。

参考

MDN

サンプルを見てみましょう。

サンプル