網頁中的元素到底誰bind了那些event呢?

看到這篇JQuery之軛提到，用jQuery等Library，許多event是用bind的，到最後bind了什麼都不知道，也不好Debug。

所以想來找找有什麼方法可以知道，什麼元素bind了什麼event。

先看最後知道可以的工具，就是Firefox的Firebug(此時是Firefox5)，
在HTML檢視下，可以看到某Button，後面附加了jQuery16208644716556509593=Object { events={...}, handle=function()}，點一下就可看到其bind的事件了，真是了不起。

再來看看用程式的方法，如何查看，這裏只有jQuery的部份，例如以下，button bind兩個事件click及blur，然後程式用$.data，可以查詢events：

1. <button type="button" id="test">Test</button>
2. <script>
3.   $("#test").click(function(){alert(1);}).blur(function(){alert(2);});
4.   var e = $.data($("#test").get(0), 'events');
5.   for(var p in e) alert(p);
6. </script>

然後以下找到的這段程式，可以往下探索物件的結構
http://stackoverflow.com/questions/5357442/how-to-inspect-javascript-objects，
目的是想知道除了event名稱外，其內容為何？
測試結果是簡單的程式碼ok，複雜的不行，例如:jQuery.proxy(...)，然後查到的結困，可能很難看得懂。
但這程式實際測試會掛掉或錯誤，原因在於物件層次太深太雜，就像跑不完一樣，
所以要看你查詢的物件狀態，若是範例中的document，其MAX ITERATIONS，可能得設為1才能正常運作。

1. function xinspect(o,i){
2.     if(typeof i=='undefined')i='';
3.     if(i.length>50)return '[MAX ITERATIONS]';
4.     var r=[];
5.     for(var p in o){
6.         var t=typeof o[p];
7.         r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
8.     }
9.     return r.join(i+'\n');
10. }
11. // example of use:
12. alert(xinspect(document));