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

Question

我想找出是什么触发了事件。即，此网站 stackoverflow.com 上的通知栏（该栏会告诉您何时有人发布了对某个问题的回答）它从顶部缓慢向下滚动，并为用户通知提供了一个非常好的用户界面，我认为它可以在任何页面上工作

（我需要找到它的名称） 。 ):

special_notification( message );

简而言之，当所有的 javascript 都被缩小时，我如何去找出调用（函数名称和参数）是什么样子来产生这种效果，而且我不知道包含什么提供了它。

Answer 1

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

Answer 2

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

关于您的另一个问题，您想监听页面上的所有事件并知道是什么触发了它们以及执行的代码是什么？这是正确的吗？

更新：

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

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

您还可以侦听所有 DOM 事件，在 jQuery 中您将执行以下操作：

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

其中 e 将保存事件信息。

希望这是有道理的。