Question

你知道我最喜欢的关于突兀的javascript的东西吗？你总是知道当你触发一个事件时会发生什么。

<a onclick="thisHappens()" />

既然每个人都在喝着不显眼的kool-aid，那就不那么明显了。绑定事件的调用可以发生在页面上包含的任意数量的javascript文件的任何行上。如果您是唯一的开发人员，或者您的团队有一些约束事件处理程序（如始终使用某种格式的CSS类）的约定，那么这可能不是问题。但在现实世界中，它很难理解你的代码。

像Firebug这样的DOM浏览器似乎可以提供帮助，但浏览所有元素的事件处理程序属性只是为了找到一个执行您正在寻找的代码的浏览器，这仍然很耗时。即便如此，它通常只是告诉你它是一个匿名函数（），没有行号。

我发现用于发现事件被触发时JS代码被执行的技术是使用Safari的分析工具，它可以告诉你在一段时间内JS被执行了什么，但有时可能是很多JS通过打猎。

当我点击一个元素时，必须有一种更快的方法来找出发生了什么。有人可以赐教我吗？

Answer 1

查看Visual Event ...这是一个可用于在页面上公开事件的书签。

Answer 2

如果您正在使用jQuery，您可以利用其高级事件系统并检查所附事件处理程序的函数体：

$('body').click(function(){ alert('test' )})

var foo = $('body').data('events');
// you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it.

$.each( foo.click, function(i,o) {
    alert(i) // guid of the event
    alert(o) // the function definition of the event handler
});

或者你可以实现自己的事件系统。

Answer 3

要回答您的问题，请尝试使用Firebug命令行。这将允许您使用JavaScript通过ID快速获取元素，然后遍历其侦听器。通常，如果与console.log一起使用，您甚至可以获得函数定义。

现在，捍卫不引人注意的：

我在不引人注目的JavaScript中发现的好处是，我可以更容易地看到DOM的内容。也就是说，我觉得创建匿名函数通常是糟糕的做法（只有少数例外）。（我发现JQuery最大的错误实际上在他们的文档中。匿名函数可以存在于一个虚假世界中，其中失败不会导致有用的输出，但JQuery已经使它们成为标准。）我通常只有使用匿名函数的策略如果我需要使用Prototype的bindAsListener之类的东西。

此外，如果JS文件被正确划分，它们将一次只处理DOM的一个子集。我有一个“有序的复选框”库，它只在一个JS文件中，然后在其他项目中重复使用。我通常也会将给定子库的所有方法都作为JSON对象或类的成员方法，并且每个js文件都有一个对象/类（就像我用更正式的语言做所有事情一样））。如果我对“表单验证代码”有疑问，我会查看formvalidation.js中的formValidation对象。

与此同时，我同意有时候事情会变得迟钝，特别是在与他人打交道时。但是混乱的代码是无序的代码，除非你自己工作并且是一个优秀的程序员，否则无法避免。

最后，我宁愿处理使用/* */注释掉大多数两个或三个js文件来查找行为不当的代码，然后浏览HTML并删除onclick属性。

Answer 4

称之为“kool-aid”似乎不公平。 DOM Level 2事件解决了内联事件处理的特定问题，例如总是会产生的冲突。我不回头编写代码来使用window.onload来检查是否有其他人之前已经分配过它，有时候会意外地覆盖它或者出于邋。它还确保更好地分离结构（HTML）和行为（JS）层。总而言之，这是一件好事。

关于调试，我认为没有办法解决事件处理程序是匿名函数，除了唠叨作者在可能的情况下使用命名函数。如果可以，告诉他们它产生更有意义的调用堆栈并使代码更易于维护。

Answer 5

有一件事：你不应该通过查看HTML代码来了解JavaScript中会发生什么。这有什么滋扰？ HTML用于结构。

如果你想检查哪些事件绑定到某些元素，那么现在有一个名为visual event的bookmarklet，而firebug 1.6（IIRC）将会有某种事件检查器。

不引人注目的Javascript模糊了事件处理

5 个答案: