Question

你好，我是一名新的程序员，还在学习。这是我想要弄清楚的代码：

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

当我点击div（按钮）时，会执行一些javascript代码，但我不知道是不是。如何在点击发生时判断触发了什么功能？一些监听器如何附加到此元素

Answer 1

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

Answer 2

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

Answer 3

你不能通过“仅仅”使用ECMAscript本身以非常好的方式做到这一点。例如，如果 DOM Level 1 以

的形式添加了点击事件处理程序

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

您当然可以轻松拦截节点本身的属性。如果 DOM Level 2 与.addEventListener() respectevily .attachEvent()一起发挥作用，事情会变得更加复杂。现在你没有真正有一个“位置”来寻找所有不同的侦听器函数绑定的位置。

使用jQuery会变得更好。 jQuery将把它所有的事件处理函数保存在一个特殊的对象中，该对象链接到调用的DOM节点。您可以通过获取

之类节点的.data() - expando属性来检查

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

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

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

这里的结论是，了解一个浏览器插件或者像VisualEvent这样的东西。

Answer 4

您可以将“Visual Event 2”脚本用作书签或与Chrome extension相同的脚本。

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

Answer 5

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

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

Answer 6

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

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

Answer 7

如果您使用的是FireFox，则应安装FireBug。完成后，您可以安装FireQuery，它将向您显示哪些jQuery事件绑定到哪些对象。

http://getfirebug.com/

http://firequery.binaryage.com/

Answer 8

以下是我过去使用过的东西，我认为可能是你正在寻找的东西。这样做是在页面元素上查看属性（在下面的示例中，它是文档的“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);

Answer 9

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

在使用Javascript中的事件时，通常很容易失去跟踪   什么事件订阅在哪里。如果你这一点尤其如此   正在使用大量的事件，这是现代的典型事件   采用渐进增强的界面。 Javascript库也   从技术角度为听众增加另一个复杂程度   从开发人员的角度来看，他们当然可以做到   生活更轻松！但是当出现问题时，可能很难   追溯为什么会这样。

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

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

Answer 10

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

Answer 11

右键单击页面，然后选择查看页面的来源
查找<script>代码
查找$("#buy")以及提及onClick或.on("click",function(){...});
如果找不到，请按以下方式搜索：document.getElementById("buy")
您已找到function或代码，其中事件处理程序代码为

$("#buy")是JQuery的一种说法，即找到一个id属性为buy的元素，如果它有.跟随它有一些函数，那么该函数是作用于JQuery找到的元素。

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

11 个答案: