jQuery入門 | イベント処理 | イベントメソッド .click() .hover() .keypress() .focusin()

イベントメソッド

jQueryは.on()メソッド以外にも、JavaScriptイベントに関するさまざまなメソッドを提供している。
これらのイベントメソッドは、イベントが発生する要素に応じて次のように分類できる。

1. マウスイベントに関するメソッド
2. キーボードイベントに関するメソッド
3. 入力フォームイベントに関するメソッド

マウスイベントに関するメソッド

jQueryが提供するマウスイベントに関するメソッドは次のとおりである。

.click()メソッドと.dblclick()メソッド

.click()メソッドは、JavaScriptの"click"イベントをイベントハンドラーに関連付け、対象要素で"click"イベントが発生したときに設定した関数を実行する。

.dblclick()メソッドは、JavaScriptの"dblclick"イベントをイベントハンドラーに関連付け、対象要素で"dblclick"イベントが発生したときに設定した関数を実行する。

次の例は、ボタンがクリックまたはダブルクリックされたときに状態を表示する例である。

$("button").click(function() {
  $("div").text("クリックされました。");
});
$("button").dblclick(function() {
  $("div").text("ダブルクリックされました。");
});

コードを実行

.hover()メソッド

.hover()メソッドは、JavaScriptの"mouseenter"と"mouseleave"イベントを1つのイベントハンドラーに関連付け、対象要素でそれらのイベントが発生したときに設定した関数を実行する。

次の例は、ボタンにマウスが乗ったとき、またはボタンから出たときに状態を表示する例である。

$("button").hover(function() {
  $("#text").text("マウスが入りました。");
}, function(){
  $("#text").text("マウスが出ました。");
});

コードを実行

設定した関数が2つある場合、1つ目の関数は"mouseenter"イベントが発生したときに実行され、2つ目の関数は"mouseleave"イベントが発生したときに実行される。

設定した関数が1つだけの場合は、“mouseenter"イベントまたは"mouseleave"イベントのどちらかが発生したときに、その1つの関数が実行される。

キーボードイベントに関するメソッド

.keypress()メソッド

.keypress()メソッドは、JavaScriptの"keypress"イベントをイベントハンドラーに関連付け、対象要素で"keypress"イベントが発生したときに設定した関数を実行する。

次の例は、<input>要素にキーボードで文字を入力するたびにカウントして表示する例である。

var i = 0;
$("input").keypress(function() {
  $("#text").text((++i) + "回キーが押されました。");
});

コードを実行

Shift、Esc、Deleteのように画面に表示されないキー(modifier and non-printing keys)は、“keydown"イベントを発生させるが、“keypress"イベントは発生させない。

入力フォームイベントに関するメソッド

.focusin()メソッドと.focusout()メソッド

.focusin()メソッドは、“focusin"イベントをイベントハンドラーに関連付け、対象要素で"focusin"イベントが発生したときに設定した関数を実行する。

.focusout()メソッドは、“focusout"イベントをイベントハンドラーに関連付けるか、対象要素で"focusout"イベントが発生したときに設定した関数を実行する。

$("input").focusin(function() {
  $(this).css("background-color", "yellow");
});

$("input").focusout(function() {
  $(this).css("background-color", "white");
});

コードを実行

thisキーワードは、現在選択されている要素そのものを指す。

参照

• https://api.jquery.com/click/
• https://api.jquery.com/dblclick/
• https://api.jquery.com/hover/
• https://api.jquery.com/keypress/
• https://api.jquery.com/focusout/
• https://api.jquery.com/focusin/