jQueryイベント

jQueryはイベントの処理に設計されています。

イベントとは何ですか？

さまざまな訪問者に対するページの応答は、イベントと呼ばれます。

イベントハンドラーはHTMLで特定のイベントが発生した場合、呼び出されるメソッドです。

実例：

• 要素にマウスを移動します。
• ラジオボタンを選択します。
• 要素をクリックします。

“トリガー”（または「発火」）という用語は、イベントでよく使用されます。例えば、“キーを押すと、keypressイベントがトリガーされます”。

一般的なDOMイベント：

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

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

ページでクリックイベントを指定します。

$("p").click();

次のステップは、イベントをトリガーするタイミングを定義することです。 これは、イベント関数を介して実行できます。

$("p").click(function(){ 
// 操作がトリガーされた後に実行されるコードをここに記述する!! 
});

常用のjQueryイベントメソッド

$(document).ready()

$(document).ready()メソッドを使用すると、ドキュメントが完全に読み込まれた後に関数を実行できます。イベントメソッドについては、jQuery構文の記事で説明しました。

click()

click()メソッドはクリックイベントがトリガーされた場合、呼び出す関数です。

この関数は、ユーザーがHTML要素をクリックした時に実行されます。

次の例では、特定の<p>要素でクリックイベントがトリガーされると、現在の<p>要素が非表示になります。

実例

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

dblclick（）

要素をダブルクリックすると、dblclickイベントが発生します。

dblclick() メソッドはdblclickイベントをトリガーし、またはdblclickイベントが発生した時に実行する関数を指定します。

実例

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

mouseenter()

要素にマウスポインタが入った場合、mouseenterイベントが発生します。

mouseenter()メソッドは、mouseenterイベントをトリガーし、またはmouseenterイベントが発生した時に実行する関数を指定します。

実例

$("#p1").mouseenter(function(){ 
alert('マウスは id="p1" の要素に移動した!'); 
});

mouseleave()

マウスポインタが要素から離れると、mouseleaveイベントが発生します。

mouseleave()メソッドは、mouseleaveイベントをトリガーし、またはmouseleaveイベントが発生した時に実行する関数を指定します。

実例

$("#p1").mouseleave(function(){ 
alert("マウスはこの段落を離れた。"); 
});

mousedown()

マウスポインタが要素上に移動してマウスボタンが押されると、mousedownイベントが発生します。

mousedown()メソッドは、mousedownイベントをトリガーし、またはmousedownイベントが発生した時に実行する関数を指定します。

実例

$("#p1").mousedown(function(){ 
alert("mousedownイベントを発生させる。"); 
});

mouseup()

要素でマウスキーを離すと、mouseupイベントが発生します。

mouseup()メソッドは、mouseupイベントをトリガーし、またはmouseupイベントが発生した時に実行する関数を指定します。

実例

$("#p1").mouseup(function(){ 
alert("mouseupイベントを発生させる。"); 
});

hover()

hover()メソッドは要素にマウスポインターが乗った時と乗った状態から離れた時使用されます。

マウスが要素に移動すると、指定された最初の関数（mouseenter）がトリガーされます。マウスがこの要素から移動すると、指定された次の関数（mouseleave）がトリガーされます。

実例

$("#p1").hover( 
function(){ 
alert(" p1に入った!"); 
}, 
function(){ 
alert("p1から離した!"); 
} 
);

focus()

要素がフォーカスを取得すると、focusイベントが発生します。

要素がマウスキーで選択されるか、tabキーで配置されると、要素はフォーカスを取得します。

focus()メソッドはfocusイベントをトリガーし、またはfocusイベントが発生した時に実行する関数を指定します。

実例

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

blur()

要素がフォーカスを失うと、blurイベントが発生します。

blur()メソッドは、blurイベントをトリガーし、またはblurイベントが発生した時に実行する関数を指定します。

実例

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