開發程式時偵錯的需求,想確認預期的事件函數是否已正確bind到元素上?

直覺想法是去查詢jQuery內部物件,列出已經掛載的事件函數。追了一下原始程式,發現jQuery會把各元素的事件保存在jQuery.data(elem, "events"),而events裡又會為不同事件(例如: click, dblclick, load)各宣告一個handlers,放入events[eventType];由於我們可以對同一事件宣告多個事件函數,因此handlers中會以handlers[handlerId]的方式保存事件函數。

看起來很抽象,跑一次範例便一目瞭然:

$("div")
.click(function() { alert("Click 1"); })
.click(function() { alert("Click 2"); })
.dblclick(function() { alert("DblClick"); });
var handlers = jQuery.data($("div")[0], "events");
var sb = [];
for (var t in handlers)
{
    sb.push("*EventType=" + t);
    for (var h in handlers[t])
        sb.push("    HandlerId[" + h + "]->" + handlers[t][h]);
}
alert(sb.join("\n"));

可得結果如下: (程式裡所謂HandlerId是一個流水號,是jQuery.event物件為每個事件函數所賦與不重複的編號)

*EventType=click
    HandlerId[3]->function() { alert("Click 1"); }
    HandlerId[4]->function() { alert("Click 2"); }
*EventType=dblclick
    HandlerId[5]->function() { alert("DblClick"); }

實地測試,這個做法在jQuery-1.3.2或jQuery-1.4下都是可行的。但在jQuery 1.4下HandlerId會從1起跳,背後原因是jQuery-1.4取消了原本在bindReady()裡jQuery.event.add( window, "load", jQuery.ready );,以及防止IE Memory Leak的邏輯中改用attachEvent取代jQuery( window ).bind( 'unload', ...);,少了兩個系統內建事件函數,自訂事件函數序號變成從1開始。

【註】以上的做法列舉範圍只限透過jQuery.bind方式宣告的事件函數。


Comments

# by kk

Jeffrey大...您好 如果想要取的掛載某事件的元素的話,請問該怎麼做呢? 請J大指點了!謝謝

# by Ark

一般jquery framwork的設計導向會以class為事件綁定的標籤 可參照jquery ui dom 元素bind event 後會多ui-xxxx的class 名稱,SO 逆向的取就是用 .hasClass('ui-xxxx') 來判別有沒被綁到

Post a comment


85 - 42 =