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

イベント名を指定する。

• change
• click
• dblclick
• drag
• drop
• input
• keydown
• keypress
• keyup
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup
• reset
• select
• submit
• toggle

eventObject

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

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

jQueryObject.mouseleave(handler)

使用例

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

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

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

jQueryイベントオブジェクト

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