jQueryのbind()とunbind()の例

jQuery bind()およびunbind()の例

jQuerybind()関数は、イベントハンドラーを要素にアタッチするために使用され、unbind()は、既存のイベントハンドラーを要素から切り離すために使用されます。

デモ用の単純なhtmlコード。

Mouseover Me, Click Me or Double Click Me

1. 練る()

jQueryは、「クリック」、「dblclick」またはカスタムイベント名などのJavaScriptイベントタイプを完全にサポートしています。

IDが「BoxId」の要素にシングルクリックイベントをバインドします。

$("#BoxId").bind("click", (function () {
    $('span').text("Single Clicked");
}));

IDが「BoxId」の要素にダブルクリックイベントをバインドします。

$("#BoxId").bind("dblclick", (function () {
    $('span').text("Double Clicked");
}));

2. bind()+イベントオブジェクト

jQueryには、ユーザーの環境に関する詳細情報を取得するための多くのイベントオブジェクトが付属しています。ここで、jQuery event object detailsを確認してください。

イベントオブジェクトパラメータを使用した「マウスオーバー」イベントを、「BoxId」のIDを持つ要素にバインドします。

$("#BoxId").bind("mouseover", (function (event) {
    $('span').text('The mouse cursor is at ('
    + event.pageX + ', ' + event.pageY + ')');
}));

3. bind()+イベントデータ

つまり、カスタムパラメータデータをbind()関数に渡します。

シングルクリックイベントをバインドし、カスタムメッセージをパラメーターとして「BoxId」のIDを持つ要素に渡します。 関数内では、event.dataを使用してパラメータメッセージにアクセスできます。

var name = 'Message pass by jQuery event data';
$("#BoxId").bind("click", {msg: name},(function (event) {
    $('span').text("Single Clicked - " + event.data.msg);
}));

4. bind()+複数のイベント

複数のイベントをバインドするには、スペースで区切って各イベントを含めることができます。

シングルクリックイベントとダブルクリックイベントを、「BoxId」のIDを持つ要素にバインドします。

$("#BoxId").bind("click dblclick", (function () {
    $('span').text("Single Clicked");
}));

または、次のようにコーディングすることもできます:(Supported in jQuery 1.4)。

$("#BoxId").bind({
    click : function(){
        $('span').text("Single Clicked");
    },
    dblclick : function(){
        $('span').text("Double Clicked");
    }
});

5. unbind()

既存のイベントのバインド解除またはデタッチは非常に簡単で、添付されたイベントタイプを指定するだけです。

「BoxId」のIDを持つ要素から「click」および「dblclick」イベントを切り離しました。

$('#BoxId').unbind("click");
$('#BoxId').unbind("dblclick");

自分で試してください









  

jQuery bind() and unbind() example

Mouseover Me, Click Me or Double Click Me