jQueryのイベント処理

jQueryではマウスクリックなどのイベント処理を行うことができます。この記事では、jQueryのイベントオブジェクトとその使い方をサンプルを交えてご紹介します。

.on()

イベントハンドラ(イベントが発生したときに実行される処理)を指定する。

window.jQuery(exprt).on(eventName, function([eventObject]){ script })
jQuery(exprt).on(eventName, function([eventObject]){ script })
window.$(exprt).on(eventName, function([eventObject]){ script })
$(exprt).on(eventName, function([eventObject]){ script })
eventName
イベント名を指定する。
eventObject

イベントオブジェクトが渡される。

次に示すメソッドでもイベントハンドラを設定できる。

jQueryObject.mouseleave(handler)

使用例

<p id="p1">ここをクリックしてください。</p>
<script>
  $('#p1').on('click', function(e){
    alert(e.type + 'イベントが発生しました。');
  });
</script>

上記の実行結果を次に示す。

ここをクリックしてください。

jQueryイベントオブジェクト

jQeuryのイベント処理では、独自のイベントオブジェクトが生成される。イベントオブジェクトは、イベントハンドラの引数として渡される。

イベントオブジェクトのプロパティ
プロパティ 説明
currentTarget 現在のDOM要素
data バインド時に渡されるデータ
pageX イベント発生時のマウスポインタのドキュメントの左端からの位置
pageY イベント発生時のマウスポインタのドキュメントの上端からの位置
namespace イベントの名前空間
relatedTarget 発生したイベントに関係するほかのDOM要素
result イベントハンドラが最後に返した値
target イベント発生時のDOM要素
timeStamp イベント発生時のエポック秒(ミリ秒)
type イベントの種別
which キーボードイベントで押されたキーのコード
イベントオブジェクトのメソッド
メソッド 説明
preventDefault イベントのデフォルトの動作を停止する。
isDefaultPrevented preventDefaultが呼び出されたかどうかを返す。
stopImmediatePropagation イベントのバブリングを停止する。
isImmediatePropagationStopped stopImmediatePropagationが呼び出されたかどうかを返す。
stopPropagation イベントのバブリングを停止する。
isPropagationStopped stopPropagationが呼び出されたかどうかを返す。