JavaScript/Event
Event オブジェクトは、DOM内で発生したイベントを表現するためのインターフェースです。イベントは、ユーザーのアクション（クリック、キー入力など）やAPIコールによって生成され、イベントターゲットに配信されます[1]。
構文
[編集]constevent=newEvent(type,options);
type: イベントの種類を表す文字列（例: "click", "load", "keydown"）。options: イベントの設定オプションを含むオブジェクト。bubbles: イベントがDOMツリーを上に伝播するかどうか（デフォルト: false）。cancelable: イベントがキャンセル可能かどうか（デフォルト: false）。composed: イベントがシャドウDOMの境界を越えて伝播するかどうか（デフォルト: false）。
例
[編集]基本的なイベントの作成と発火
[編集]以下のプログラムは、カスタムイベントを作成して要素に発火させる例を示しています。
// イベントを作成constevent=newEvent('build',{bubbles:true});// イベントを要素に発火constelem=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>constparent=document.getElementById('parent');constchild=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()を有効にすると、イベントの伝播を停止することができます。
カスタムイベントのデータ伝達
[編集]以下のプログラムは、カスタムイベントを使用してデータを伝達する例を示しています。
// カスタムデータを含むイベントを作成constcustomEvent=newCustomEvent('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要素の状態変化やユーザーインタラクションを検出するための基本的なメカニズムです。
