JavaScriptでのブラウザイベントの概要

---

イベントは、何かが起こったことを示すシグナルです。

たとえば、DOMに組み込まれているイベントの一部は-

です。

• クリック −ポインティングデバイスボタン（任意のボタン。まもなくプライマリボタンのみになります）が押され、要素上で離されました。

• マウスオーバー −ポインティングデバイスは、リスナーが接続されている要素またはその子の1つに移動されます。

• キーアップ −任意のキーが解放されます

• ロード −リソースとそれに依存するリソースの読み込みが完了しました。

-

を使用して独自のイベントを作成できます

new Event('my-event');

これらのイベントは、dispatchEvent-

を使用して要素にディスパッチできます。

HTML −

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

JS −

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

addEventListenerを使用して、イベントリスナーを追加し、イベントの受信時に何をするかを定義できます-

HTML −

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

JS −

const myDiv = document.querySelector('#my-div')
myDiv.addEventListener(
   // Event for which we want to listen
   'my-event',
   // Handler Function
   (e) => alert('Event fired!')
);
myDiv.dispatchEvent(new Event('my-event'));

上記のコードを実行すると、イベントリスナーがdivにアタッチされ、my-eventイベントがリッスンされます。このイベントが発生すると、コールバック関数が呼び出されます。

このイベントをディスパッチしているため、すぐに発生し、アラートボックスが表示されます。