JavaScript/Event

Event オブジェクトは、DOM内で発生したイベントを表現するためのインターフェースです。イベントは、ユーザーのアクション（クリック、キー入力など）やAPIコールによって生成され、イベントターゲットに配信されます。

構文

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プロパティを通じて任意のデータを伝達することができます。

プロパティ

Event.AT_TARGET

Event.BUBBLING_PHASE

Event.CAPTURING_PHASE

Event.NONE

Event.arguments

Event.caller

Event.length

Event.name

Event.prototype

インスタンスプロパティ

Event.prototype.AT_TARGET

Event.prototype.BUBBLING_PHASE

Event.prototype.CAPTURING_PHASE

Event.prototype.NONE

Event.prototype [ Symbol.toStringTag ]

インスタンスアクセサ

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

インスタンスメソッド

Event.prototype.composedPath()

Event.prototype.constructor()

Event.prototype.initEvent()

Event.prototype.preventDefault()

Event.prototype.stopImmediatePropagation()

Event.prototype.stopPropagation()

注意点

• イベントフェーズ: イベントの伝播は通常3つのフェーズ（キャプチャリング、ターゲット、バブリング）で行われます。
• デフォルトの動作: 多くのイベントには、ブラウザが実行するデフォルトの動作があります。preventDefault()メソッドを使用してこれを防ぐことができます。
• イベントリスナー: addEventListener()とremoveEventListener()を使用してイベントリスナーを追加・削除できます。
• イベントの伝播制御: stopPropagation()とstopImmediatePropagation()を使用してイベントの伝播を制御できます。
• イベントの種類: DOM仕様には多数の標準イベント（click, keydown, load, mouseoverなど）が定義されています。
• クロスブラウザの考慮: 古いブラウザでは、イベント処理の実装に違いがある場合があります。

外部リンク

• DOM Standard: Events
• MDN Web Docs: Event