66

你好我是一个新的程序员，还在学习。这是我试图弄清楚的代码：

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

当我单击 div （按钮）时，会执行一些 javascript 代码，但我不知道是不是这样。当点击发生时，我怎么知道触发了什么函数？一些监听器是如何附加到这个元素的

4

11 回答 11

106

在谷歌浏览器的开发者工具中（点击扳手图标>工具>开发者工具），选择元素选项卡中的元素，在右侧打开“事件监听器”面板，您将看到所有事件

于 2012-08-06T17:22:03.120 回答
24

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

于 2012-08-06T17:08:06.800 回答
13

您不能通过“仅”使用 ECMAscript 本身以非常好的方式做到这一点。例如，如果DOM Level 1添加了一个 click 事件处理程序，其形式为

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

您当然可以轻松地拦截节点本身的该属性。如果DOM Level 2受到.addEventListener()尊重，事情就会变得更加复杂.attachEvent()。现在你真的没有一个“地方”来寻找所有不同的监听器函数从哪里绑定。

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

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

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

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

这里的结论是，注意浏览器插件或者可能是VisualEvent 之类的东西。

于 2012-08-06T17:08:10.337 回答
9

您可以使用“ Visual Event 2 ”脚本作为书签或与Chrome 扩展程序相同的脚本。

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

于 2012-08-07T17:51:28.353 回答
5

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

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

于 2012-08-06T17:06:45.220 回答
4

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

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

于 2012-08-06T17:07:49.093 回答
3

如果您使用的是 FireFox，则应该安装 FireBug。一旦你有了它，你就可以安装 FireQuery，它会告诉你哪些 jQuery 事件绑定到哪些对象。

http://getfirebug.com/

http://firequery.binaryage.com/

于 2012-08-06T17:08:15.903 回答
2

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

在 Javascript 中处理事件时，通常很容易忘记在哪里订阅了哪些事件。如果您使用大量事件，则尤其如此，这在采用渐进增强的现代界面中很典型。从技术角度来看，Javascript 库还为侦听器增加了另一程度的复杂性，而从开发人员的角度来看，它们当然可以让生活变得更轻松！但是当出现问题时，很难追查为什么会这样。

正是由于这个原因，我整理了一个名为 Visual Event 的 Javascript 小书签，它直观地显示了页面上订阅了事件的元素、这些事件是什么以及事件在触发时将运行的功能。这主要是为了帮助调试，但在其他页面上查看订阅的事件也可能非常有趣和信息丰富。

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

于 2012-08-06T17:15:57.100 回答
2

以下是我过去使用过的东西，我认为这可能是您正在寻找的东西。它的作用是观察页面元素上的属性（在下面的示例中，它是文档的“标题”属性），然后在该属性更改时显示带有 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);
于 2012-08-06T17:12:03.453 回答
1

你在使用 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 中）内置了“开发者工具” 。这可能会帮助您进行一些进一步的调试和跟踪。

于 2012-08-06T17:07:00.827 回答
0
  1. 右键页面，选择查看页面源
  2. 查找<script>标签
  3. 寻找$("#buy")和提及onClick或.on("click",function(){...});
  4. 如果找不到，请按照以下方式搜索：document.getElementById("buy")
  5. 您已找到function事件处理程序代码所在的 或 代码

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

于 2012-08-06T17:11:41.650 回答