ブラウザでイベントを発生させて処理をしよう

2022年2月16日2022年4月18日 souki202

イベントとは、クリックや読み込み完了など、システムで生じた動作などのことです。ボタンをクリックしたというイベントから何かを動作させる、といった動きはよくありますね。

基本的にはaddEventListenerでイベントを設定しますが、HTMLにonclickなどを書いて、そこからスクリプトに情報を送りたいときは時々あります。

1 イベントの基本
2 イベントを実行する方法
3 イベントの種類
4 キーボードでShiftキーなどの複合イベント
5 バブリング (イベントの連続発火)
- 5.1 バブリングを止める (stopPropagation)
6 デフォルトの挙動を止める(preventDefault)
7 まとめ

イベントの基本

イベントに対する動作は、addEventListenerや、HTMLのonclickなどへの設定を利用します。

しばしばwindow.onclickに代入したり、window.onloadに代入するなどありますが、非推奨です。代入すると代入前に設定されていた動作は上書きされてしまうため、バグの原因になります。

ここで、イベントが起こることで機能が動作することを、発火と表現することがあります。

イベントを実行する方法

HTMLに設定する

クリック時にalertを出してみましょう。

See the Pen Event onclick by Totori (@souki202) on CodePen.

ボタンを押すとアラートが出現しますね。onclick内に設定するのはJavascriptのコードで、alert('clicked!!')もシンプルなJavascriptのコードです。

また、Javascriptに書いた関数を呼び出すこともできています。

イベントを伝える

クリックなどのイベントが発生すると、その時の情報が生成されます。

イベントの情報はeventという変数に格納されます。

また、イベントが発生した要素は、thisで取得できます。

<button onclick="popAlert(event, this)">Click me</button>

function popAlert(e, obj) {
    console.log(e);
    console.log(obj);
    alert(message);
}

これで、イベントの情報とクリックされた要素をpopAlert関数に送ることができ、様々な情報を取得できます。

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
    isTrusted: true
    altKey: false
    altitudeAngle: 1.5707963267948966
    azimuthAngle: 0
    bubbles: true
    button: 0
    buttons: 0
    cancelBubble: false
    cancelable: true
    clientX: 43
    clientY: 22
    ...

See the Pen event onclick2 by Totori (@souki202) on CodePen.

addEventListenerを使う

Javascript側でaddEventListenerを使うことで、どの要素でどういったイベントが起こったら何の処理をするか、というのを設定できます。

<button>Click me!</button>

// イベント発生源を取得する
const button = document.querySelector("button");

// それに対し、"click"イベントが起こったときに実行する内容を決める
button.addEventListener("click", (e) => {
    console.log(e);
});

addEventListenerには、第1引数にイベントの種類を、第2引数に動作させたい内容を関数で書きます。

See the Pen by Totori (@souki202) on CodePen.

関数の引数にはイベントの詳細情報が入っています。ここで情報を出力するとこのような情報が入っています。

PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
    isTrusted: true
    altKey: false
    altitudeAngle: 1.5707963267948966
    azimuthAngle: 0
    bubbles: true
    button: 0
    buttons: 0
    cancelBubble: false
    cancelable: true
    clientX: 43
    clientY: 22
    ...

よく利用するのはマウスの座標系と、targetです。targetにはイベントを起こした対象が入っています。(上の例だとbutton要素)

イベントの種類

比較的よく使うイベント一覧です。その中でも特によく使うものは太字にしています。

マウス関連
- click
  - ターゲットをクリックしたとき
- mousemove
  - ターゲット上でマウスが移動したとき
- mousedown
  - ボタンを押した瞬間
  - クリックでは, 押して離したときに発火する
- mouseup
  - ボタンを離した瞬間
- mouseover
  - カーソルがターゲット内に移動したとき
- mouseout
  - カーソルがターゲット外に移動したとき
キーボード関連
- keypress
  - フォーカスがあたっている状態でキーを押して離したとき
  - 基本的にはフォームのinputなどに使用
  - 長押しすると何度も発火する
- keydown
  - フォーカスがあたっている状態でキーを押した瞬間
  - 長押しすると何度も発火する
- keyup
  - フォーカスがあたっている状態でキーを離した瞬間
  - 長押ししても離すまでは発火しない
フォーム関連
- select
  - テキストフィールドで文字選択をしたとき
- change
  - 値が変化したとき
    - ラジオボタンの付け替え, 入力文字列の変更など
- submit
  - フォームのsubmitを行ったとき
  - ボタンではなく, formに付ける
- reset
  - フォームのresetを行ったとき
  - ボタンではなく, formに付ける
- focus
  - inputやtextareaなどがフォーカス状態になったとき
- blur
  - inputやtextareaなどのフォーカスが外れたとき
  - キーを離した瞬間
DOM関連
- DOMContentLoaded
  - DOMの読み込みが終わったとき
    - loadは, 画像などのリソースの読み込みも完了しないと発火しない
- DOMActivate
  - ターゲットがアクティブになったとき
- DOMFocusIn
  - ターゲットがフォーカス状態になったとき
- DOMFocusOut
  - ターゲットからフォーカスが離れたとき
ウィンドウ関連
- load
  - ページの読み込みが完了したとき
    - しばしばwindowに付ける
- resize
  - 対象の大きさが変化したとき
    - しばしばwindowに付ける
- scroll
  - 対象のスクロールバーの位置が変化したとき
    - しばしばwindowに付ける