如何使用Firebug或类似工具调试JavaScript / jQuery事件绑定？

Question

我需要调试一个使用jQuery进行一些相当复杂和混乱的DOM操作的Web应用程序。某一时刻，某些与特定元素绑定的事件并未触发，只是停止工作。

如果我有能力编辑应用程序源代码，那么我将向下钻取并添加一堆Firebugconsole.log()语句和注释/取消注释代码段，以试图找出问题所在。但是，假设我无法编辑应用程序代码，并且需要使用Firebug或类似工具完全在Firefox中工作。

Firebug非常擅长让我浏览和操作DOM。不过，到目前为止，我还无法弄清楚如何使用Firebug进行事件调试。具体来说，我只想查看在给定时间绑定到特定元素的事件处理程序的列表（使用Firebug
JavaScript断点来跟踪更改）。但是Firebug无法查看绑定事件，或者我太笨了，找不到它。:-)

有什么建议或想法吗？理想情况下，我只想查看和编辑绑定到元素的事件，就像今天编辑DOM一样。

Answer 1

请参阅如何在DOM节点上查找事件侦听器。

简而言之，假设某个事件处理程序已附加到您的元素（例如）：$('#foo').click(function(){console.log('clicked!') });

您可以像这样检查它：

• jQuery 1.3.x

  var clickEvents = $('#foo').data("events").click;
  

  jQuery.each(clickEvents, function(key, value) {
  console.log(value) // prints “function() { console.log(‘clicked!’) }”
  })
  
  

• jQuery 1.4.x

  var clickEvents = $('#foo').data("events").click;
  

  jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints “function() { console.log(‘clicked!’) }”
  })

请参阅jQuery.fn.data（jQuery内部存储您的处理程序的位置）。

• jQuery 1.8.x

  var clickEvents = $._data($('#foo')[0], "events").click;
  

  jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints “function() { console.log(‘clicked!’) }”
  })