javascript - 如何大致找出什么 javascript 控制网页上一般元素的行为？

Question

看看这个 fiddle http://jsfiddle.net/52VtD/2635/

在其中您可以看到一个工具提示正在工作。

假设我们不是在看 fiddle ，也看不到 javascript 源代码，但我们想知道是什么控制了这个工具提示行为？

答案是

$("#tooltip1").tooltip();

那么我们如何使用 chrome 或 firefox 检查器或其他一些调试/浏览器检查器找到答案？最好是快速，而不是下载所有 .js 文件并在 IDE 中美化它们，然后手动搜索。

Answer 1

对此没有快速的答案。您几乎必须分析具体情况，看看可以寻找哪些线索。

在这种特殊情况下，您会怀疑 #tooltip 对象附加了一个事件监听器。您可以先在 Chrome 调试器中查看事件监听器。右键单击该按钮，选择 Inspect Element，单击 Event Listeners 选项卡，然后查看事件监听器。在这种特殊情况下，您会看到该对象的一堆。你想要的是 mouseout 和 mouseover。但是，当您看到事件监听器的附加位置时，它只会将您带到 jQuery 的内部。这对库来说是一个挑战，因为实际上是库将事件附加为开发人员使用的某些更高级别 API 的一部分。

所以，现在您知道 jQuery 用于附加这些事件。您需要找出代码中附加这些事件的位置。为此，您需要开发一种理论，说明开发人员如何在 jQuery 中识别这个特定对象。由于这个简单的文档没有特定的结构，开发人员找到这个特定对象的可能方式是使用传递给某个 jQuery 函数的 "#tooltip" 选择器。因此，在这一点上，我将在页面中的所有 JS 中搜索 "#tooltip" 并查看您找到的内容。

在 Chrome 调试器中，您可以按 Ctrl+F 并输入#tooltip。然后，按 enter 几次，因为它会将您带到不同的用途，第三次，它将带您到:

$("#tooltip1").tooltip();

而且，你会得到你的答案。显然，像这样的每个问题都有点不同，需要进行一些侦探工作和搜索才能找出要在 Javascript 中搜索的线索。有些情况比其他情况要难得多。