Javascriptユーザー操作からではないイベント発火方法

2023.02.13

CustomEvent

dispatch

Event

ユーザー操作

受動的

ブラウザにはいろいろなイベントが登録され、さまざまな場面で実行されています。
ユーザー操作によるイベントは代表的なものだと、
click 、scroll、mouseover、resize、keyup、touchstartなどがあったりします。

しかしながら、
これ以外にも何の気なしに使用しているイベントはどのように発火し実行されているのでしょうか。
その辺りを解説していきたいと思います。

ユーザー操作によるイベント

前述で表記したものとかぶってしまうところはありますが、
今一度、ユーザーによるイベントはどのようなものがあるかを書き連ねてみたいと思います。

マウス系イベント

前述で表記したものとかぶってしまうところはありますが、
下記のようなものが存在します。

click, contextmenu, dblclick, drag, dragend, dragenter, dragleave, dragover, dragstart, drop, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, mousewheel, scroll, pointerdown, pointermove, pointerrawupdate, pointerup, pointercancel, pointerover, pointerout, pointerenter, pointerleave

キーボード系イベント

keydown, keypress, keyup

タッチ系イベント

touchstart, touchmove, touchend, touchcancel

これ以外にもユーザー操作の副次的に発火するものがありますが、
ユーザーの操作によって同期的（すぐに起こる）イベントはこの辺りかと思います。

何かしらの完了・変更されたことによるイベント

表示されているページの中でページ自体もしくは要素の状態が完了・変更された際に起こるイベントが存在し、
こちらもよく使用するものだったり、稀に使用することがあるイベントになるのではないかと思います。

load, DOMContentLoaded, select, input, animationend, animationiteration, animationstart, transitionrun, transitionstart, transitionend, transitioncancel, hashchange, pagehide, pageshow

実行されるイベント

イベントが起こったときに何かしらの処理を実行したい場合、
特定の要素もしくは最上位の要素である window に対して、
addEventListener を使用して、
起こったもしくは起こしたイベントに対して処理を登録します。

例を挙げると下記のようになるかと思います。

// ボタン要素を click したタイミングでイベントを発火
btnElement.addEventLister('click', () => {
  // クリックされた時に実行したい処理
})

// Webページの DOMContentLoaded になったタイミングでイベントを発火
window.addEventListener('DOMContentLoaded', () => {
  // DOM要素の読み込みが完了した時に実行したい処理
})

btnElement の click イベント発火は能動的であり、
window の DOMContentLoaded イベント発火は受動的な実行になっているのがわかるかと思います。

受動的イベントの発火方法

能動的はイベントの発火はユーザーの操作によって発火することが分かりましたが、
受動的はイベントの発火はどのようにして起こっているのでしょうか。

本題

受動的なイベントの発火は何かしらのタイミングで、
プログラム側から「このイベントを発火（実行）してください」という信号が、
イベントが登録されている要素に対して送られます。

例としては、
window の DOMContentLoaded イベントに処理が登録されていれば、
ブラウザの処理がこのタイミング（DOMContentLoaded）に来たとき、
window に対して登録されている処理を実行しなさいという信号が送られ、
DOMContentLoaded で登録された処理が実行されます。

実際にどうやって実行されているかを解説していきたいと思います。
DOMContentLoaded を例に説明しますが、
ブラウザとしての実際の処理手順としては違うので、
大まかな流れとして捉えてください。
下記のようなHTMLページがあったとします。

<html>
  <head>
    <script>
      window.addEventListener('DOMContentLoaded', () => {
        console.log('DOMContentLoaded のタイミングで処理実行')
      })
    </script>
  </head> 
  <body>
    ...
  </body>
</html>

HTMLがテキストとして読み込まれます。
順に要素として解釈されていき script要素が読み込まれます。
script要素はJSを実行し、windowに対してDOMContentLoaded時にイベントが行われるように処理を登録します。
全てのHTMLが解釈されました。
解釈された＝DOMContentLoadedのタイミングになったので、windowにイベントの実行の信号を送ります。
信号を受け取ったwindowはDOMContentLoadedに登録された処理を実行します。

でこの時、ブラウザはwindowに対して信号を送るのですが、
プログラムで信号（イベント）を作り、windowに知らせます。

const eventSignal = new Event('DOMContentLoaded');
window.dispatchEvent(eventSignal);

下記のソースコードを開発者ツールのConsoleで実行すると
console.warnに設定した文字列を表示させることができます。

window.addEventListener('DOMContentLoaded', () => {
  console.warn('DOMContentLoadedのタイミングはもう終わってるのに実行されたよ')
})
const eventSignal = new Event('DOMContentLoaded');
window.dispatchEvent(eventSignal);

受動的イベントの発展型

このイベントのいいところは、
現状存在すイベント以外にも自分で新しいイベントが作成できて、
受動的、能動的にイベントを実行でき、
イベントを行った時にデータも渡すことができるという点です。

デフォルトで存在しないイベントを作成してみる

実際に新しいイベントlet_it_beを作成してみます。

window.addEventListener('let_it_be', () => {
  console.warn('let_it_be イベントの処理が行われたよ')
})
const eventSignal = new Event('let_it_be');
window.dispatchEvent(eventSignal);

開発者ツール上ではlet_it_beイベントが実行されたと思います

イベントにデータを渡して処理実行時に受け取る

イベントにデータを渡すには、
先ほど使用していたnew Event('イベント名')ではなく,
new CustomEvent('イベント名', {})を使用してデータを受け渡します。

window.addEventListener('let_it_be2', (evt) => {
  console.warn('let_it_be2 イベントの処理が行われたよ')
  console.log(evt.detail)
})
const eventSignal = new CustomEvent('let_it_be2', {
  detail: {
    type: 'song'
  }
});
window.dispatchEvent(eventSignal);

上記のソースコードを開発者ツールのConsoleで実行することで、
カスタムイベントで設定したデータが、
window のイベント発火時に読み取れているのがわかるかと思います。

使い所

使い所としてはなかなか使うところがなさそうですが、
アプリケーション開発では使うことになるのではないかと思います。
しかしながら、
フレームワーク（Vue, React）などが使用されている場合は、
アプリケーション開発でもなかなか使用されることはないのではないかと思います。

イベント発火・プログラムの実行タイミングをコントロールしたいという事が出てきた時に、
思い出して試してみていただけたらと思います。

Programing