jQueryイベントメソッド

❮ 前次 ❯

jQueryは、HTMLページのイベントに応答するようにカスタマイズされています。

イベントとは何ですか？

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

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

例：

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

「火災/火災」という用語は、イベントでよく使用されます。例：「キーを押すとすぐに、キープレスイベントが発生します」。

一般的な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メソッドがあります。

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

$("p").click();

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

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

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

$（document）.ready（）

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

クリック（）

この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("You entered p1!");
});

mouseleave（）

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

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

例

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

mousedown（）

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

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

例

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

mouseup（）

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

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

例

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

hover（）

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

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

例

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

集中（）

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

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

例

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

ブラー（）

この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");
  }
});

jQueryの演習