bind(type, [data], fn)


version 1.0 以降

解説

マッチした要素に、イベントハンドラをバインドします。 カスタムイベントもバインドすることができます。

イベントの振る舞いの制御

イベントハンドラがfalseを返すと、イベントバブリング、及び、イベントに定義されている標準アクションが停止されます。 イベントバブリングのみを停止するには、イベントハンドラに渡されるイベントオブジェクトstopPropagation()を呼び出してください。 また、標準アクションのみを停止するには、preventDefault()を呼び出してください。

バインド時にデータを渡す

バインド時にイベントハンドラにデータを渡すには、第2引数にデータを指定します。その場合、イベントハンドラは第3引数に指定します。 データは、イベントハンドラに渡されるイベントオブジェクトdataプロパティで参照することができます。

イベント実行時にデータを渡す

イベント実行時に渡されたデータは、イベントハンドラの第2仮引数以降に展開されます。

引数

  • type
    String: バインドするイベントを表す文字列。標準では以下のイベントが定義されています。

    "blur", "focus", "load", "resize", "scroll", "unload", "click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave", "change", "select", "submit", "keydown", "keypress", "keyup", "error"

    上記の他にも、ユーザ定義のカスタムイベントをバインドすることができます。

    また、イベント種別文字列をスペースで区切り指定することによって、複数のイベントに同じイベントハンドラを一度に指定することができます。
    $("p").bind("click dblclick", function(event){
        // click イベントと、dblclick イベントに同じイベントハンドラを設定
    });
    

  • [data]オプション
    Object: イベントハンドラに渡すデータ。イベントオブジェクトdataプロパティで参照。
  • fn
    Function: バインドするイベントハンドラ関数。この関数には2つの引数が渡されます。
    引数 説明
    event イベントオブジェクト。バインド時に渡されたデータは、dataプロパティで参照。
    triggerData イベント実行時に渡されたデータ。

戻り値

  • jQuery: jQueryオブジェクト

関連


例1:文字列をクリックすると、その要素を指定された速度と不透明度でフェードします。

$("#test_1 li").bind(
    "click",                        // click イベントにバインド
    {speed:"slow", opacity:0.2},    // 第2引数に、速度と不透明度のデータを指定
    function(event){
        // event.data で、バインド時に渡されたデータを参照
        $(this).fadeTo(event.data.speed, event.data.opacity);
    }
);

例1

  • jQuery
  • prototype.js
  • Ext
  • script.aculo.us
  • YUI

例2:文字列をクリックすると、その文字列を背景色に設定します。(カスタムイベントの例)

// カスタムイベント colorClickEvent のバインド
$("#test_2 li").bind(
    "colorClickEvent",              // colorClickEvent イベントにバインド
    function(event, triggerData){
        // 第2仮引数で、実行時に渡されたデータを参照
        $(this).css("background-color", triggerData);
    }
);

// カスタムイベント colorClickEvent の実行
$("#test_2 li").click(function(){
    // イベント実行時にテキストデータを渡す
    $(this).trigger("colorClickEvent", [$(this).text()]);
});

例2

  • lightgreen
  • yellow
  • #6495ed
  • #c0c0c0
  • orange