JavaScriptのブラウザイベント入門！イベントの作成・発火・リスナー登録を解説

イベントとは？

イベント（event）とは、「何かが起こった」ことを伝えるためのシグナル（合図）です。ユーザーが要素をクリックしたり、キーボードを操作したり、ページの読み込みが完了したりすると、ブラウザは対応するイベントを発火させます。

DOMに組み込まれた主なイベント

DOMには数多くの組み込みイベントが用意されています。代表的なものを以下に紹介します。

• click － 要素の上でポインティングデバイスのボタン（任意のボタン。将来的には主ボタンのみになる予定）が押されて離されたときに発生します。

• mouseover － ポインティングデバイスが、リスナーが登録された要素またはその子要素の上へ移動したときに発生します。

• keyup － キーボードのいずれかのキーが離されたときに発生します。

• load － 対象のリソースおよびその依存リソースの読み込みが完了したときに発生します。

カスタムイベントを作成する

独自のイベントも簡単に作成できます。Event コンストラクタを使って、次のように記述します。

new Event('my-event');

イベントを発火させる（dispatchEvent）

作成したイベントは、dispatchEvent() メソッドを使って特定の要素に対して発火できます。

HTML：

<div id="my-div"></div>

JavaScript：

const myDiv = document.querySelector('#my-div')
myDiv.dispatchEvent(new Event('my-event'));

イベントリスナーを登録する（addEventListener）

イベントを受け取ったときの処理は、addEventListener() を使って定義します。

HTML：

<div id="my-div"></div>

JavaScript：

const myDiv = document.querySelector('#my-div')
myDiv.addEventListener(
    // 監視したいイベント名
    'my-event',
    // ハンドラー関数
    (e) => alert('Event fired!')
);
myDiv.dispatchEvent(new Event('my-event'));

コードの実行結果

このコードを実行すると、<div> 要素に対して my-event を監視するイベントリスナーが登録されます。そして、そのイベントを検知すると、登録されたコールバック関数が呼び出されます。

今回は自分でイベントを発火（dispatch）しているため、イベントは即座に発生し、画面にはアラートダイアログが表示されるはずです。