69log

jQuery1.7がリリースされたのですが、今回追加されたevent apiのon()、off()がとても便利で、on()でイベントを登録し、off()でイベントを削除するするということで、これまでより直感的です。

event apiとしてはこれまで、bind、live、delegateが存在していました。今回追加されたon()は、bindやdelegateと置き換わる機能となります。


$(elements).on(events [, selector] [, data], handler);
$(elements).off(events [, selector] [, data], handler);


例えば使い方としてとしては

var sayHello = function (event) { alert("Hello "+event.data.name); }
$("button").on("click", { name: "kazu69" }, sayHello);


のように、これまでのbindやliveのように使用できる。
また、

var sayHello = function (event) { alert("Hello "+event.data.name); }
$("div").on("click", 'span', { name: "kazu69" }, sayHello);


のようにselectorオプションを使うとdelegateのように使用する事もできる(引数の順序が違うけど)

$(elements).on(events-map [, selector] [, data]);
$(elements).off(events-map [, selector] [, data]);

またeventMapを利用する事で複数のイベントを登録する事ができます。
たとえば、

$('input[type=text]').on({
focus: function() {
$('div').empty().append('focus');
},
blur: function() {
$('div').empty().append('blur');
}
});


とすると、簡潔にまとめる事も可能です。
off()についてもon()とおなじく

$('.parent a').unbind('click');
$('.parent a').off('click');

という具合にunbindと置き換える事ができ、

$('.parent a').die('click');
$('.parent').off('click', 'a');


$('.parenta').undelegate('a', 'click');
$('.parent').off('click', 'a');

のようにdieやundelegateを置き換える事も可能です。

ちなみにこれまでのevent apiも使用できます。
でも、これからはon()、off()を使う方がいいですね。