Events/API/jQuery
bind(type, [data], fn)
要素が持つ、例えば”click”などのイベントに対してコールバック関数を紐付けます。カスタムイベントに対してもbind可能です。
イベントハンドラは、コールバック関数に対してイベントオブジェクトを渡します。”click”や”submit”などの元々の動作をキャンセルするには、戻り値にfalseを返してください。これにより、イベントのbubblingも止まりますので、親要素が持つイベントの発生もキャンセルされてしまうことに注意してください。ほとんどの場合は、イベントには無名関数を渡すことが出来ます。そうしたケースであれば同じクロージャの中で変数を利用できますが、それが難しいような場合は第二引数を用いてデータを引き渡すことも可能です。（その場合はコールバック関数は三番目の引数になります）
イベントハンドラは、コールバック関数に対してイベントオブジェクトを渡します。”click”や”submit”などの元々の動作をキャンセルするには、戻り値にfalseを返してください。これにより、イベントのbubblingも止まりますので、親要素が持つイベントの発生もキャンセルされてしまうことに注意してください。ほとんどの場合は、イベントには無名関数を渡すことが出来ます。そうしたケースであれば同じクロージャの中で変数を利用できますが、それが難しいような場合は第二引数を用いてデータを引き渡すことも可能です。（その場合はコールバック関数は三番目の引数になります）
サンプル
サンプル1
クリックされた場合に要素の持つテキストを表示します。
$("p").bind("click", function(){
alert( $(this).text() );
});
サンプル2
無名関数ではなく、ハンドラとして関数ポインタを渡すことも可能です。
また、第二引数に渡したハッシュにeventオブジェクトを使ってアクセスしていることにも注目してください。
また、第二引数に渡したハッシュにeventオブジェクトを使ってアクセスしていることにも注目してください。
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
サンプル3
“submit”の動作とイベントバブリングをキャンセルするには、戻り値にfalseを返します。
$("form").bind("submit", function() {
return false;
})
サンプル4
イベントの動作だけをキャンセルしてバブリングは続行するには、eventオブジェクトのpreventDefaultメソッドを実行します。
$("form").bind("submit", function(event){
event.preventDefault();
});
サンプル5
逆に以降のバブリングのみをキャンセルするには、eventオブジェクトのstopPropagationメソッドを実行します。
$("form").bind("submit", function(event){
event.stopPropagation();
});
サンプル6
カスタムイベントにbindすることも可能です。
また、実行時に渡されたデータをコールバック関数の第二引数で受け取っている点にも注目してください。
また、実行時に渡されたデータをコールバック関数の第二引数で受け取っている点にも注目してください。
$("p").bind("myCustomEvent", function(e, myName){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
[全コードを表示]
[実行結果を単体で表示]