イベント系チートシート

自分用チートシートです。

イベントリスナーの登録

メソッド	説明	例	備考
element.addEventListener('event', handler, options)	推奨される方法。 複数のリスナーを登録でき、柔軟性が高い。options で詳細設定可能。	btn.addEventListener('click', handleClick);	this はイベントを発生させた要素を指す。
element.removeEventListener('event', handler)	addEventListenerで登録したリスナーを削除。handler関数が同じ参照である必要がある。	btn.removeEventListener('click', handleClick);
element.onevent = handler	古い方法。一つのイベントタイプにつき一つのリスナーしか登録できない。	btn.onclick = handleClick;	this はイベントを発生させた要素を指す。
HTML属性 (<button onclick="...">)	HTMLタグ内に直接記述。非推奨。	<button onclick="handleClick()">Click</button>	this はグローバルオブジェクト（Window）を指す場合がある。

イベントオブジェクト

イベントハンドラー関数が呼び出されると、最初の引数としてイベントオブジェクト（Event）が渡されます。

プロパティ/メソッド	説明	例
event.type	イベントのタイプ（例: 'click', 'keydown'）。	console.log(event.type);
event.target	イベントが最初に発生した要素（最も深い要素）。	console.log(event.target.tagName);
event.currentTarget	イベントリスナーがアタッチされている要素。	console.log(event.currentTarget.id);
event.preventDefault()	イベントのデフォルトの動作をキャンセルする。	e.preventDefault(); (リンクの遷移などを防ぐ)
event.stopPropagation()	イベントの伝播（バブリング/キャプチャ）を停止する。	e.stopPropagation();
event.stopImmediatePropagation()	stopPropagation()に加え、同じ要素の他のリスナーの実行も停止する。
event.key / event.code	キーボードイベントで押されたキーの情報（KeyboardEvent）。	if (e.key === 'Enter') { ... }
event.keyCode / event.which	非推奨。event.key / event.code を使用。
event.button / event.buttons	マウスイベントで押されたボタンの情報（MouseEvent）。	if (e.button === 0) { /* 左クリック */ }
event.clientX / event.clientY	マウスポインタのクライアント領域（ビューポート）内でのX/Y座標。	console.log(e.clientX, e.clientY);
event.pageX / event.pageY	マウスポインタのドキュメント内でのX/Y座標。

イベント伝播 (Event Propagation)

イベントはDOMツリーを伝播します。このプロセスには「キャプチャフェーズ」と「バブリングフェーズ」の2つがあります。

キャプチャフェーズ (Capturing Phase)

イベントはWindowオブジェクトから発生し、DOMツリーを下へと伝播し、イベントが発生した要素（event.target）に到達します。
addEventListenerの第三引数に { capture: true } を設定することで、このフェーズでイベントを処理できます。

バブリングフェーズ (Bubbling Phase)

イベントはイベントが発生した要素から始まり、DOMツリーを上へと伝播し、Windowオブジェクトまで到達します。
addEventListenerのデフォルトはバブリングフェーズでの処理です。

イベント委譲 (Event Delegation)

親要素にイベントリスナーを一つだけアタッチし、子孫要素から発生したイベントを処理するテクニック。これにより、メモリ使用量を抑え、動的に追加される要素にも対応できます。

// 親要素にリスナーを設定  
parentList.addEventListener('click', function(event) {  
  // クリックされた要素が特定のクラスを持つ場合のみ処理  
  if (event.target.classList.contains('list-item')) {  
    console.log('クリックされたリスト項目:', event.target.textContent);  
  } 
}); 

主要なイベントタイプ

カテゴリ	イベントタイプ	説明
マウスイベント	click	要素がクリックされた時。
	dblclick	要素がダブルクリックされた時。
	mousedown	マウスボタンが押された時。
	mouseup	マウスボタンが離された時。
	mousemove	マウスカーソルが移動された時。
	mouseover	マウスカーソルが要素の上に乗った時（バブリングあり）。
	mouseout	マウスカーソルが要素から離れた時（バブリングあり）。
	mouseenter	マウスカーソルが要素の上に乗った時（バブリングなし）。
	mouseleave	マウスカーソルが要素から離れた時（バブリングなし）。
キーボードイベント	keydown	キーが押された時（押し続けられる）。
	keyup	キーが離された時。
	keypress	文字が生成された時（非推奨）。
フォームイベント	submit	フォームが送信された時。
	input	input, textareaなどの値が変更された時（入力中も発火）。
	change	input, select, textareaなどの値が変更され、要素からフォーカスが外れた時。
	focus	要素がフォーカスを受け取った時。
	blur	要素がフォーカスを失った時。
ドキュメント/ウィンドウイベント	DOMContentLoaded	HTMLが完全に読み込まれ、パースされた時（CSSや画像は待たない）。
	load	ページ全体（HTML、CSS、画像など）が完全に読み込まれた時。
	resize	ウィンドウのサイズが変更された時。
	scroll	要素（通常はウィンドウ）がスクロールされた時。
ドラッグ＆ドロップ	dragstart, drag, dragend, drop など	要素がドラッグ＆ドロップされた時。