jQuery 主要なイベント一覧

Tag:

よく利用するjQueryのイベントを紹介します。デモを載せているので実際の動きを確かめてみてください。

[マウスイベント] click
実行タイミング
マウスの左ボタンが押され、そのまま離されたとき


demo(オレンジ色の領域をクリック)


html

<div id="jq_click1" style="width: 50px;height: 50px;background-color: #EDA184"></div>
<div id="jq_click1_rslt" style="height:50px;overflow: auto"></div>

javascript

$("#jq_click1").click(function () {
    $("#jq_click1_rslt").append("clickされました。");
});
[マウスイベント] dblclick
実行タイミング
ダブルクリックされたとき


demo(オレンジ色の領域をダブルクリック)


html

<div id="jq_dblclick1" style="width: 50px;height: 50px;background-color: #EDA184"></div>
<div id="jq_dblclick1_rslt" style="height:50px;overflow: auto"></div>

javascript

$("#jq_dblclick1").dblclick(function () {
    $("#jq_dblclick1_rslt").append("dblclickされました。");
});
[マウスイベント] mousedown mouseup
実行タイミング
mousedown:マウスのボタン(左ボタン、右ボタンなど)が押されたとき
mouseup:マウスのボタンが離されたとき


demo(オレンジ色の領域でマウスボタンを押してください)


html

<div id="jq_mousedown_up1" style="width: 50px;height: 50px;background-color: #EDA184"></div>
<div id="jq_mousedown_up1_rslt" style="height:50px;overflow: auto"></div>

javascript

$("#jq_mousedown_up1").mousedown(function () {
    $("#jq_mousedown_up1_rslt").append("mousedownされました。");
}).mouseup(function () {
    $("#jq_mousedown_up1_rslt").append("mouseupされました。");
});
[マウスイベント] mouseover mouseout
実行タイミング
mouseover:マウスカーソルが重なったとき
mouseout:マウスカーソルが外れたとき


demo(オレンジ色の領域にマウスカーソルを重ねてください)


html

<div id="jq_mouseover_out1" style="width: 50px;height: 50px;background-color: #EDA184"></div>
<div id="jq_mouseover_out1_rslt" style="height:50px;overflow: auto"></div>

javascript

$("#jq_mouseover_out1").mouseover(function () {
    $("#jq_mouseover_out1_rslt").append("mouseoverされました。");
}).mouseout(function () {
    $("#jq_mouseover_out1_rslt").append("mouseoutされました。");
});
[マウスイベント] mousemove
実行タイミング
マウスカーソルが動いたとき


demo(オレンジ色の領域でマウスを動かしてください)


html

<div id="jq_mousemove1" style="width: 50px;height: 50px;background-color: #EDA184"></div>
<div id="jq_mousemove1_rslt" style="height:100px;overflow: auto"></div>    

javascript

$("#jq_mousemove1").mousemove(function (e) {
    $("#jq_mousemove1_rslt").html(
            "screen[デスクトップ上の座標]=" + e.screenX + "," + e.screenY + "<br>" +
            "page[ドキュメント内での座標]=" + e.pageX + "," + e.pageY + "<br>" +
            "client[ブラウザ表示領域内での座標]=" + e.clientX + "," + e.clientY + "<br>" +
            "offset[要素内での座標]=" + e.offsetX + "," + e.offsetY + "<br>"
            );
});
[フォームイベント] focus blur
実行タイミング
focus:フォーム部品が選択状態になったとき
blur:フォーム部品が非選択状態になったとき


demo(フォームを選択状態にするとフォームの背景色が変わります)


html

<div id="jq_focus_blur1"><input type="text"></div>

javascript

$("#jq_focus_blur1 input").focus(function () {
    $(this).css("background-color", "#ffc");
}).blur(function () {
    $(this).css("background-color", "#fff");
});
[フォームイベント] change
実行タイミング
フォーム部品が非選択状態になったとき内容が変更されていたとき


demo(フォームに適当な文字を入力してくだいさい)


html

<div id="jq_change1"><input type="text"></div>
<div id="jq_change1_rslt" style="height:50px;overflow: auto"></div>

javascript

$("#jq_change1 input").change(function () {
    $("#jq_change1_rslt").append("内容が変更されました。");
});
[フォームイベント] submit
実行タイミング
フォームの送信ボタンがクリックされたとき


demo(送信ボタンをクリック)


html

<div id="jq_submit1"><form><input type="submit" value="送信" /></form></div>
<div id="jq_submit1_rslt" style="height:50px;overflow: auto"></div>

javascript

$("#jq_submit1 form").submit(function () {
    $("#jq_submit1_rslt").append("送信がクリックされました。");
    return false;
});
[イベントの設定] on off
on:イベント設定
off:イベント解除

onの指定方法には、「bindメソッドに対応した指定方法」と「delegateメソッドに対応した指定方法」があります。

「bindメソッドに対応した指定方法」
⇒ 動的に追加された要素にイベントを設定することはできない。

「delegateメソッドに対応した指定方法」では、
⇒ 動的に追加された要素にイベントを設定することができる。

demo

■bindメソッドに対応した指定方法での利用例

■delegateメソッドに対応した指定方法での利用例1

■delegateメソッドに対応した指定方法での利用例2


html

<p>■bindメソッドに対応した指定方法での利用例</p>
<div id="jq_on1" style="width: 50px;height: 50px;background-color: #EDA184"></div>
<div id="jq_on1_rslt" style="height:50px;overflow: auto"></div>

<p>■delegateメソッドに対応した指定方法での利用例1</p>
<div class="jq_range">
<div id="jq_on2" style="width: 50px;height: 50px;background-color: #EDA184"></div>
</div>
<div id="jq_on2_rslt" style="height:50px;overflow: auto"></div>

<p>■delegateメソッドに対応した指定方法での利用例2</p>
<div class="jq_range">
<div id="jq_on3" style="width: 50px;height: 50px;background-color: #EDA184"></div>
</div>
<div id="jq_on3_rslt" style="height:50px;overflow: auto"></div>

javascript

// bindメソッドに対応した指定方法
$("#jq_on1").on("click", function () {
    $("#jq_on1_rslt").append("clickされました。");
});

// delegateメソッドに対応した指定方法
// 最初のjQueryオブジェクトで調査範囲を指定。
// (動的要素にイベントを設定する際の負荷軽減のため)
$(".jq_range").on("click", "#jq_on2", function () {
    $("#jq_on2_rslt").append("clickされました。");
});

// delegateメソッドに対応した指定方法
// データを渡すこともできます。
$(".jq_range").on("click", "#jq_on3", {title: "dn-web64"}, function (e) {
    $("#jq_on3_rslt").append(e.data.title);
});

スポンサーリンク