Javascript 如何找到导致特定 UI 事件的函数调用？答案

【问题标题】：Javascript how do I find what function call resulted in a specific UI event?Javascript 如何找到导致特定 UI 事件的函数调用？
【发布时间】：2011-04-18 03:00:07
【问题描述】：

我想找出触发事件的原因。即this site stackoverflow.com 上的通知栏（当有人发布了您正在写答案的问题的答案时，该栏会告诉您。它从顶部缓慢向下滚动，并为用户通知提供了一个非常好的 UI。我已经看到它几乎可以在任何页面上运行。

我想它在起作用（我需要找到它的名字）：

special_notification( message );

在摘要中，我该如何找出调用（函数名称和参数）的样子，当所有 javascript 都被缩小时会产生这种效果，而我不知道 include 提供了什么。

【问题讨论】：

不确定，但他们必须为服务器上的每个用户维护会话。如果您打开一个答案，服务器上将有一个程序跟踪您的会话更新。当它为您当前加载的问题找到任何更新时，他们将发送 AJAX 响应，其中包含标题/正文中的小信息。这将显示小的 html 面板，您将能够看到变化..

标签： javascript debugging reverse-engineering

【解决方案1】：

在 Firefox 中下载并安装 firebug。
转到您感兴趣的 URL，然后打开 firebug。您可能需要重新加载页面。
现在点击萤火虫右上角的小箭头图标。这将让您突出显示页面上的任何元素并为该元素提供相应的 HTML。
现在您有了元素的 id，您应该可以在 javascript 代码中找到它。即使缩小了，名称也需要与 DOM 名称相对应。

【讨论】：

【解决方案2】：

要阅读缩小的 js，可以使用http://jsbeautifier.org 之类的工具。

关于您的其他问题，您想监听页面上的所有事件并了解触发它们的原因以及执行的代码是什么？对吗？

更新：

没有办法监听所有事件。如果你真的需要，你可以为每个事件设置监听器，但你仍然会错过自定义事件，我猜这就是你所追求的。

我建议您使用 Firebug 检查代码以了解事件在每种情况下的使用方式。

你也可以收听所有 DOM 事件，在 jQuery 中你会这样做：

$('body').bind('DOMSubtreeModified', function(e){
  console.log('DOMSubtreeModified triggered');
  console.log(e); //Firebug console.
});

e 将保存活动信息的位置。

希望这是有道理的。

【讨论】：

好吧，你不能 :) 你能做的就是听 DOM 事件，我会更新我的答案。