jQueryのbindメソッド

Posted by specterant on 2012.02.01

いつも忘れてしまうのでメモ。
bindメソッドは、セレクタで発生するイベントに対してイベント処理を行う関数を関連付けたり、一度に複数のイベントを設定できるモノ。

で、標準で以下のイベントが設定できます。

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

/********************************
//書式
********************************/
$('セレクタ').bind('イベント名', function() {
  //セレクタでイベントが発生した時に実行するイベント処理
});
 
 
//イベント処理を行う関数にデータを渡す場合
$('セレクタ').bind('イベント名', "イベントデータ", function(event) {
  //event.dataでイベントデータを取得
});
 
 
//複数のイベントを同時に設定する場合(※イベント名の間にスペース入れて区切る)
$('セレクタ').bind('イベント名 イベント名', function() {
  //セレクタでイベントが発生した時に実行するイベント処理
});
/********************************
//そんな訳で、記述例
********************************/
$('#div1 a').bind('click', function() {
  alert("clickしました!");
});
 
 
//イベント処理を行う関数にデータを渡す場合
/* ------------------------------------------------------------------------
var message = '#div2でイベントデータ取得!';
$('#div2 a').bind('click', function() {
  alert(message);
});
message = '#div4でイベントデータ取得!';
$('#div4 a').bind('click', function() {
  alert(message);
});
【出力】#div4でイベントデータ取得!('#div2 a'も'#div4 aも同じになっちゃう。)
------------------------------------------------------------------------ */
var message = "イベントデータ取得!";
$('#div2 a').bind('click', {m:message}, function(e) {
  alert(e.data.m);
});
 
 
//複数のイベントを同時に設定する場合(※イベント名の間にスペース入れて区切る)
$('#div3 a').bind('click mouseout', function() {
  alert("clickかmouseoutしました!");
});

参考サイト
.bind() – jQuery API
bind(type, [data], fn) – jQuery API 1.4.4 日本語リファレンス – StackTrace

No comments yet.

Write a comment:

WP-SpamFree by Pole Position Marketing