jQueryのバインド方法によるイベント実行優先順位

Pocket

DOMオブジェクトに対してイベントをバインドした際の実行順序は bind > delegate > live

// 以下のメソッドをバインドする。
var funcA = function () {

alert("funcA!");

};

var funcB = function () {

alert("funcB!");

};

var funcC = function () {

alert("funcC!");

};

// 恒常的にfuncAをバインド

$(".class").live("click", funcA)

// funcAの後にfuncBを実行する場合は、liveを使う必要がある。

$(".class").live("click", funcB)

// funcAの前にFuncCを実行する場合は、bindを使う必要がある。

$(".class").bind("click", funcB)

他にも方法があるが、

イベントバインド順による処理の実行順序の変異は覚えておいて損はないかと。

何故、実行順が異なるかは以下のブログを参照。

jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a")....

バインドメモ

①$(“#dom”).click(func);

②$(“#dom”).bind(“click”, func)

①と②は同じ意味。

③$(“#dom”).delegate(“a”, “click”, func) // #dom配下のa要素に対しclickイベントを再バインドなしでイベント定義

④$(“a”).live(“click”, func)

③と④も影響する範囲は違うが同じ意味。

タイトルとURLをコピーしました