デバッグ時やJavaScriptのコードからDOMノードのイベントリスナーを見つけるには？

ページ上で何が起こっているかを確認したい場合は、Visual Eventブックマークレットを使ってみてください。

Update:Visual Event 2がリリースされました。

それは、イベントの取り付け方によります。例えば、以下のようなクリックハンドラがあるとします。

var handler = function() { alert('clicked!') };

このハンドラを要素にアタッチするには、検査できるものとそうでないものがあります。

方法A）単一のイベントハンドラ

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

方法B）複数のイベントハンドラ

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

方法C）：jQuery

$(element).click(handler);

• 1.3.x

   // 検査
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, value) {)
       alert(value) // アラート "function() { alert('clicked!') }"
   })

• 1.4.x (ハンドラをオブジェクト内に格納)

   // 検査
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, handlerObj) {)
       alert(handlerObj.handler) // アラート "function() { alert('clicked!') }"
       // 他にもあります： handlerObj.type, handlerObj.namespace
   })

（jQuery.fn.data`、jQuery.data`参照）。

方法D）。)プロトタイプ (messy)

$(element).observe('click', handler);

• 1.5.x

   // 検査
   Event.observers.each(function(item) {})
       if(item[0] == element) { 。
           alert(item[2]) // アラート "function() { alert('clicked!') }"
       }
   })

• 1.6から1.6.0.3までを含む（ここからが非常に難しい

   // 検査します。"_eventId" は < 1.6.0.3, while
   // "_prototypeEventID "は、1.6.0.3で導入されました。
   var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
   clickEvents.each(function(wrapper){)
       alert(wrapper.handler) // アラート "function() { alert('clicked!') }"
   })

• 1.6.1 (少し改善)

   // 検査する
   var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
   clickEvents.each(function(wrapper){)
       alert(wrapper.handler) // アラート "function() { alert('clicked!') }"
   })

Firebug]1があれば、console.dir(object or array)を使って、任意のJavaScriptのスカラ、配列、オブジェクトの素敵なツリーをコンソールログに表示することができます。

試してみてください。

console.dir(clickEvents);

または

console.dir(window);