最新のWeb開発のチュートリアル
 

jQueryイベントメソッド

❮前 次の章❯

jQueryのは、オーダーメイドのHTMLページ内のイベントに応答することです。

イベントは何ですか？

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

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

例：

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

用語"fires/fired"ことが多いイベントで使用されます。 例：「 keypressイベントは、キーを押した瞬間に発射されます」。

ここではいくつかの一般的なDOMイベントは、次のとおりです。

マウスイベント キーボードイベント フォームイベント ドキュメント/ウィンドウイベント
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()

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()

hover()メソッドは2つの機能を取り、の組み合わせであるmouseenter()とmouseleave()メソッド。

マウスは、HTML要素を出るときに、マウスがHTML要素に入ったときに最初の機能が実行され、第二の機能が実行されます。

例

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave 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");
    }
});
»それを自分で試してみてください

練習で自分自身をテスト！

演習1» 演習2» 演習3» 演習4» 演習5»

jQueryのイベントメソッド

フルjQueryのイベント参照については、当社をご覧くださいjQueryのイベントのリファレンス 。


❮前 次の章❯