JavaScript/Event
Event オブジェクトは、DOM内で発生したイベントを表現するためのインターフェースです。イベントは、ユーザーのアクション（クリック、キー入力など）やAPIコールによって生成され、イベントターゲットに配信されます[1]。
構文
const event = new Event(type, options);
type: イベントの種類を表す文字列（例: "click", "load", "keydown"）。options: イベントの設定オプションを含むオブジェクト。bubbles: イベントがDOMツリーを上に伝播するかどうか（デフォルト: false）。cancelable: イベントがキャンセル可能かどうか（デフォルト: false）。composed: イベントがシャドウDOMの境界を越えて伝播するかどうか（デフォルト: false）。
例
基本的なイベントの作成と発火
以下のプログラムは、カスタムイベントを作成して要素に発火させる例を示しています。
// イベントを作成 const event = new Event('build', { bubbles: true }); // イベントを要素に発火 const elem = document.getElementById('element'); elem.dispatchEvent(event); // イベントリスナーを設定 elem.addEventListener('build', function (e) { console.log('イベントが発火されました!'); console.log(e.type); // "build" });
このプログラムでは、"build"という名前のカスタムイベントを作成し、指定された要素に対して発火させています。また、そのイベントをリッスンするためのイベントリスナーも設定しています。
イベントの伝播（バブリング）
以下のプログラムは、イベントの伝播（バブリング）の動作を示しています。
// HTMLの構造: // <div id="parent"> // <button id="child">クリック</button> // </div> const parent = document.getElementById('parent'); const child = document.getElementById('child'); // 親要素にイベントリスナーを設定 parent.addEventListener('click', function (e) { console.log('親要素がクリックされました！'); console.log('イベントターゲット:', e.target.id); // 実際にクリックされた要素 console.log('現在のターゲット:', e.currentTarget.id); // リスナーが設定された要素 }); // 子要素にイベントリスナーを設定 child.addEventListener('click', function (e) { console.log('子要素がクリックされました！'); // イベントの伝播を停止する場合 // e.stopPropagation(); });
このプログラムでは、子要素のボタンがクリックされると、そのイベントは子要素から親要素へとバブリングしていきます。コメントアウトされているe.stopPropagation()を有効にすると、イベントの伝播を停止することができます。
カスタムイベントのデータ伝達
以下のプログラムは、カスタムイベントを使用してデータを伝達する例を示しています。
// カスタムデータを含むイベントを作成 const customEvent = new CustomEvent('userAction', { bubbles: true, detail: { name: 'John', id: 123, action: 'login' } }); // イベントリスナーを設定 document.addEventListener('userAction', function (e) { console.log('ユーザーアクション:', e.detail.action); console.log('ユーザー名:', e.detail.name); console.log('ユーザーID:', e.detail.id); }); // イベントを発火 document.dispatchEvent(customEvent);
このプログラムでは、CustomEventを使用してカスタムデータを含むイベントを作成し、そのデータをイベントリスナーで取得しています。detailプロパティを通じて任意のデータを伝達することができます。
プロパティ
アクセサ
メソッド
インスタンスプロパティ
インスタンスアクセサ
- get Event.prototype.bubbles
- get Event.prototype.cancelBubble
- get Event.prototype.cancelable
- get Event.prototype.composed
- get Event.prototype.currentTarget
- get Event.prototype.defaultPrevented
- get Event.prototype.eventPhase
- get Event.prototype.returnValue
- get Event.prototype.srcElement
- get Event.prototype.target
- get Event.prototype.timeStamp
- get Event.prototype.type
インスタンスメソッド
注意点
- イベントフェーズ: イベントの伝播は通常3つのフェーズ（キャプチャリング、ターゲット、バブリング）で行われます。
- デフォルトの動作: 多くのイベントには、ブラウザが実行するデフォルトの動作があります。
preventDefault()メソッドを使用してこれを防ぐことができます。 - イベントリスナー:
addEventListener()とremoveEventListener()を使用してイベントリスナーを追加・削除できます。 - イベントの伝播制御:
stopPropagation()とstopImmediatePropagation()を使用してイベントの伝播を制御できます。 - イベントの種類: DOM仕様には多数の標準イベント（click, keydown, load, mouseoverなど）が定義されています。
- クロスブラウザの考慮: 古いブラウザでは、イベント処理の実装に違いがある場合があります。
脚註
- ↑ イベントは、DOM要素の状態変化やユーザーインタラクションを検出するための基本的なメカニズムです。