jQueryイベントメソッド

jQueryは、HTMLページのイベントに応答するように調整されています。

イベントとは？

Webページが応答できるさまざまな訪問者のアクションはすべて、イベントと呼ばれます。

イベントは、何かが起こる正確な瞬間を表します。

例:

要素の上にマウスを移動する
ラジオボタンの選択
要素をクリックする

「fires/fired」はしばしばイベントと一緒に使われる。例「キーを押した瞬間にキー押下イベントが発生する。

以下は一般的なDOMイベントです。：

一般的なDOMイベントを次に示します。

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

イベントメソッドのjQuery構文

jQueryでは、ほとんどのDOMイベントに同等のjQueryメソッドがあります。

ページ上のすべての段落にクリックイベントを割り当てるには、次のようにします。

<div>$("p").click();</div>

次のステップは、イベントが発生したときに何が起こるべきかを定義することです。イベントに関数を渡す必要があります。

<div>$("p").click(function(){ // action goes here!! });</div>

一般的に使用されるjQueryイベントメソッド

$(document).ready()

この$(document).ready()メソッドを使用すると、ドキュメントが完全にロードされたときに関数を実行できます。このイベントについては、jQuery構文の章ですでに説明されています。

click()

このclick()メソッドは、イベントハンドラー関数をHTML要素に付加します。

ユーザーがHTML要素をクリックすると、関数が実行されます。

次の例は次のとおりです。要素上でクリックイベントが発生したとき<p>。現在の<p>要素を非表示にします。

例

$("p").click(function(){ $(this).hide(); });

dblclick()

このdblclick()メソッドは、イベントハンドラー関数を HTML要素に付加します。

ユーザーがHTML要素をダブルクリックすると、関数が実行されます。

例

$("p").dblclick(function(){ $(this).hide(); });

mouseenter()

このmouseenter()メソッドは、イベントハンドラー関数をHTML要素に付加します。

この関数は、マウスポインタがHTML要素に入ると実行されます。

例

$("#p1").mouseenter(function(){ alert("p1タグのエリアに入りました!"); });

mouseleave()

このmouseleave()メソッドは、イベントハンドラー関数をHTML要素に付加します。

この関数は、マウスポインタがHTML要素から離れたときに実行されます。

例

$("#p1").mouseleave(function(){ alert("さよなら！p1タグから離れました。"); });

mousedown()

このmousedown()メソッドは、イベントハンドラー関数をHTML要素に付加します。

マウスがHTML要素の上にあるときに、左、中央、または右のマウスボタンが押されると、関数が実行されます。

例

$("#p1").mousedown(function(){ alert("p1タグの上にマウスポインタがあります！"); });

mouseup()

このmouseup()メソッドは、イベントハンドラー関数をHTML要素に付加します。

マウスがHTML要素の上にあるときに、左、中央、または右のマウスボタンを離すと、関数が実行されます。

例

$("#p1").mouseup(function(){ alert("p1タグの上にマウスポインタがあります!"); });

hover()

hover()メソッドは2つの関数を受け取り、mouseenter()メソッドとmouseleave()メソッドを組み合わせたものです。

最初の関数は、マウスがHTML要素に入ったときに実行され、2番目の関数は、マウスがHTML要素から離れたときに実行されます。

例

$("#p1").hover(function(){ alert("p1タグのエリアに入りました!"); }, function(){ alert("さよなら！p1タグから離れました。"); });

focus()

このfocus()メソッドは、イベントハンドラー関数をHTML フォームフィールドに付加します。

この関数は、フォームフィールドがフォーカスを取得すると実行されます。

例

$("input").focus(function(){ $(this).css("background-color", "#cccccc"); });

blur()

このblur()メソッドは、イベントハンドラー関数をHTML フォームフィールドに付加します。

この関数は、フォームフィールドがフォーカスを失ったときに実行されます。

例

$("input").blur(function(){ $(this).css("background-color", "#ffffff"); });

on()メソッド

このon()メソッドは、選択された要素に1つ以上のイベントハンドラーをアタッチします。

クリックイベントを<p>要素にアタッチします。

例

$("p").on("click", function(){ $(this).hide(); });

複数のイベントハンドラーを<p>要素にアタッチします。

例

$("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });