イベントオブジェクトevent

eventオブジェクトは、イベントが発生した時に生成され、その情報を含みます。イベントが発生すると、eventオブジェクトはハンドラー関数に渡されます。

イベントオブジェクトeventのプロパティとメソッド

以下の表は、eventオブジェクトのプロパティとメソッド、およびその説明を示しています：

名称	説明
`event.currentTarget`	イベントのバブリング段階における現在のDOM要素。通常、このプロパティは関数内の`this`と等価です。
`event.data`	オプションのパラメータ。実行可能なハンドラーをイベントメソッドにアタッチする際に渡されるデータオブジェクト。
`event.delegateTarget`	呼び出されたばかりのjQueryイベントハンドラーがアタッチされていた要素。このプロパティは、ハンドラーが処理対象要素の祖先にバインドされている委譲イベントで最も便利です。要素に直接バインドされた非委譲ハンドラーの場合、`event.delegateTarget`の値は`event.currentTarget`の値と一致します。
`event.isDefaultPrevented`	このイベントオブジェクトに対して`event.preventDefault`メソッドが呼び出されたかどうかをチェックするメソッド。
`event.isImmediatePropagationStopped`	このイベントオブジェクトに対して`event.stopImmediatePropagation`メソッドが呼び出されたかどうかをチェックするメソッド。
`event.isPropagationStopped`	このイベントオブジェクトに対して`event.stopPropagation`メソッドが呼び出されたかどうかをチェックするメソッド。
`event.isPropagationStopped`	このイベントオブジェクトに対して`event.stopPropagation`メソッドが呼び出されたかどうかをチェックするメソッド。
`event.metaKey`	イベント発生時点で`META`キーが押されていたかどうかをチェックするメソッド。プラットフォームによってキーは異なる場合があります。`true`または`false`を返します。
`event.namespace`	イベント呼び出し時に指定された名前空間。このプロパティは、使用される名前空間に依存するタスクを持つプラグイン作成者にとって便利です。
`event.pageX`	マウスの位置をドキュメントの左端からの相対位置で示します。
`event.pageY`	マウスの位置をドキュメントの上端からの相対位置で示します。
`event.preventDefault`	このメソッドが呼び出されると、そのイベントのデフォルトアクションは実行されません。例えば、リンクをクリックしても新しいURLへの遷移は起こりません。このメソッドが呼び出されたかどうかをチェックするには、`event.isDefaultPrevented`メソッドを使用できます。
`event.relatedTarget`	もしあれば、イベントに関与している他のDOM要素を返します。 `mouseout`の場合はマウスがホバーされている要素を、 `mouseover`の場合はマウスカーソルが離れた要素を示します。
`event.result`	トリガーされたイベントのハンドラーが返した、`undefined`でない最後の値。このプロパティは、カスタムイベントの値を取得するのに便利です。
`event.stopImmediatePropagation`	要素に関連付けられた残りのすべてのイベントハンドラーの動作をキャンセルし、イベントのDOMツリー上方へのバブリングを防ぎます。イベントが祖先要素までバブリングするのを防ぐだけで、他のイベントハンドラーの動作は許可するには、`event.stopPropagation`メソッドを使用できます。 `event.isImmediatePropagationStopped`メソッドを使用して、このイベントオブジェクトに対して`event.stopImmediatePropagation`が呼び出されたかどうかを確認してください。
`event.stopPropagation`	DOMツリーを上方向へのイベントのバブリングを防ぎます。他のハンドラーはこの要素に対して引き続き動作することに注意してください。このメソッドは、`trigger`メソッドを使用して呼び出されたカスタムイベントに対しても動作します。このメソッドが呼び出されたかどうかを確認するには、`event.isPropagationStopped`を使用してください。
`event.target`	イベントを開始したDOM要素。これはイベントに登録された要素またはその子孫である可能性があります。イベントのバブリングを判断するために、`event.target`と`this`を比較することは非常に便利です。イベントがバブリングするときにイベントを委譲する際に、このプロパティは便利です。
`event.timeStamp`	ブラウザによるイベントの作成時刻と1970年1月1日との間のミリ秒単位の時間差。このプロパティは、コード内の2つの時点での`event.timeStamp`の値の差を取得することで、イベントのパフォーマンスを判断するのに便利です。イベントハンドラー内で現在時刻を取得したいだけの場合は、`getTime`メソッドを使用してください。
`event.type`	このプロパティにはイベントのタイプが指定されています。
`event.which`	このプロパティは、どのキーボードキーまたはマウスボタンが押されたかを示します。マウスの場合：`1` - 左ボタン、`2` - ホイールボタン、`3` - 右ボタン。 `event.button`の代わりに`event.which`を使用してください。

イベントオブジェクトeventのその他のプロパティ

eventオブジェクトにコピーされるその他のプロパティもあります：

altKey, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, detail, eventPhase, key, keyCode, offsetX, offsetY, originalTarget, screenX, screenY, shiftKey, toElement, view.

上記にリストされていないプロパティにアクセスするには、event.originalEventオブジェクトを使用できます。

例

どのキーが押されたかをdivに表示しましょう：

<input id="test" value="何か入力">
<div id="text"></div>

$('#test').on('keydown', function(event) {
	$('#text').html(event.type + ": " +  event.which);
});

例

クリックしたタグ名をdivに表示しましょう：

<body>
	<div id="text"></div>
	<div>
		<p>
			<strong><span>クリック</span></strong>
		</p>
	</div>
</body>

span, strong, p {
	display: block;
	padding: 10px;
	border: 1px solid black;
}

$('body').click(function(event) {
	$('#text').html('クリックされた要素: ' + event.target.nodeName);
});

イベントオブジェクトevent

イベントオブジェクトeventのプロパティとメソッド

イベントオブジェクトeventのその他のプロパティ

例

例

関連項目