如何查看附加到html元素的事件

How can I see the event that is attached to an html element?

本文关键字：元素 事件 html 何查看      更新时间：2023-09-26

我是一名新程序员，仍在学习。这是我试图弄清楚的代码：

<div id="buy" class="buy button">Buy</div>

当我点击div（按钮）时，会执行一些JavaScript代码，但我不知道它是什么。我如何判断点击时触发了什么函数？一些侦听器是如何附加到此元素的。

在Google chrome的开发工具中（单击扳手图标>工具>开发工具），在元素选项卡中选择元素，在右侧打开"事件监听器"面板，您将看到所有事件

如果您使用Firefox和Firebug，您可以尝试安装FireQuery。它将使您能够查看由jQuery绑定的处理程序。http://firequery.binaryage.com/

"仅仅"使用ECMAscript本身并不能以一种非常好的方式完成它。例如，如果DOM Level 1以的形式添加了一个点击事件处理程序

document.getElementById('buy').onclick = function() {};

当然，您可以很容易地在节点本身上截取该属性。如果DOM Level 2分别使用.addEventListener()和.attachEvent()，情况会变得更加复杂。现在，您真的没有一个"位置"来查找所有不同侦听器的绑定位置。

使用jQuery会变得更好。jQuery将把它的所有事件处理程序函数保存在一个特殊的对象中，该对象链接到调用的DOM节点。您可以通过获取像这样的节点的.data()-expando属性来检查这一点

$('#buy').data('events');

然而，现在我已经描述了将事件侦听器绑定到节点的三种不同方式（实际上是两种，因为像jQuery这样的库当然也使用DOM Level 1或2方法）。

如果一个事件是由代表团触发的，那真的会变得很难看。这意味着，我们将我们的点击事件绑定在某个父节点上，只是等待该事件出现，这样我们就可以检查target。所以现在我们甚至没有node和event listener之间的直接关系。

结论是，注意浏览器插件或类似VisualEvent的东西。

您可以将"Visual Event 2"脚本用作书签或与Chrome扩展相同的脚本。

此脚本显示所有附加到dom元素的js事件。

使用jQuery("#buy").data('events');

http://api.jquery.com/jQuery.data/可能很有趣。

使用传统element.onclick=处理程序或HTML <element onclick="handler">附加的事件处理程序可以从脚本或调试器的element.onclick属性中轻松检索。

使用DOM Level 2 Events addEventListener方法和IE的attachEvent附加的事件处理程序当前根本无法从脚本中检索。DOM Level 3曾经提出element.eventListenerList来获取所有侦听器，但尚不清楚这是否会达到最终规范。目前在任何浏览器中都没有实现。

如果您使用的是FireFox，您应该安装FireBug。一旦有了它，您就可以安装FireQuery，它将向您显示哪些jQuery事件绑定到哪些对象。

http://getfirebug.com/

http://firequery.binaryage.com/

这是我发现的最简单的方法：http://www.sprymedia.co.uk/article/Visual+事件

在Javascript中处理事件时，通常很容易失去跟踪在哪里订阅了哪些活动。如果你正在使用大量事件，这在现代界面采用渐进增强。Javascript库从技术角度为监听器增加了另一个复杂度从开发人员的角度来看，他们当然可以生活轻松多了！但当事情出错时，可能很难追踪原因。

正因为如此，我制作了一个名为可视化事件，它直观地显示页面上具有订阅的事件，这些事件是什么以及事件将在触发时运行。这主要是为了有助于调试，但它也可能非常有趣和信息丰富查看其他页面上的订阅事件。

那里有一个书签按钮，你可以拖动到工具栏（FF或Chrome），然后只需点击任何页面上你想看到附加事件的按钮。效果很好！（至少对于jQuery或其他库附加的事件）。

您在使用jQuery吗？如果是这样，您需要搜索以下三行代码中的一行：

$("#buy").click //the div is refered by its id

或

$(".buy").click //the div is refered to by the style "buy"

或

$(".button").click //refered to by the style "button"

大多数较新的浏览器都通过按下F12内置了"开发工具"（至少在IE和Chrome中是这样）。这可能有助于您进行进一步的调试和跟踪。

下面是我过去使用过的东西，我认为这可能是您想要的。这样做的目的是观察页面元素上的一个属性（在下面的示例中，它是文档的"Title"属性），然后在该属性更改时使用JS调用堆栈显示警报。在尝试查找任何代码之前，您都需要将其输入DOM，但希望您能够确定问题的原因。

我建议使用Firefox并使用Firebug进行JavaScript调试。

// Call stack code
function showCallStack() {
   var f=showCallStack,result="Call stack:'n";
   while((f=f.caller)!==null) {
      var sFunctionName = f.toString().match(/^function ('w+)'(/)
      sFunctionName = (sFunctionName) ? sFunctionName[1] : 'anonymous function';
      result += sFunctionName;
      result += getArguments(f.toString(), f.arguments);
      result += "'n";
   }
   alert(result);
}

function getArguments(sFunction, a) {
   var i = sFunction.indexOf(' ');
   var ii = sFunction.indexOf('(');
   var iii = sFunction.indexOf(')');
   var aArgs = sFunction.substr(ii+1, iii-ii-1).split(',')
   var sArgs = ''; 
   for(var i=0; i<a.length; i++) {
      var q = ('string' == typeof a[i]) ? '"' : '';
      sArgs+=((i>0) ? ', ' : '')+(typeof a[i])+' '+aArgs[i]+':'+q+a[i]+q+'';
   }
   return '('+sArgs+')';
} 
var watchTitle = function(id, oldval, newval) { showCallStack(); }
// !! This is all you should need to update, setting it to whatever you want to watch.
document.watch("title", watchTitle);
  1. 右键单击页面，然后选择查看页面的源代码
  2. 查找<script>标签
  3. 查找$("#buy")和提及onClick或.on("click",function(){...});的内容
  4. 如果你找不到，可以沿着以下行搜索：document.getElementById("buy")
  5. 您已经找到事件处理程序代码所在的function或代码

$("#buy")是JQuery的说法，即查找具有buy的id属性的元素，如果它后面有一个.和一些函数，则该函数作用于JQuery找到的元素。

相关文章：