jQuery 1.7から追加された.on() と .off()がとても便利

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()を使う方がいいですね。