6

你知道我最喜欢突兀的 JavaScript 吗?当你触发一个事件时,你总是知道它会做什么。

<a onclick="thisHappens()" />

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

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

我发现的用于发现触发事件时执行哪些 JS 代码的技术是使用 Safari 的 Profiling 工具,它可以告诉您在特定时间段内执行了哪些 JS,但有时可能需要大量 JS .

当我单击一个元素时,必须有一种更快的方法来找出发生了什么。有人可以启发我吗?

4

5 回答 5

8

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

于 2009-10-06T19:25:52.350 回答
4

如果您使用 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
});

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

于 2009-10-06T18:36:43.213 回答
2

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


现在,为不引人注目的人辩护:

我在不显眼的 JavaScript 中发现的好处是,我更容易看到 DOM 的本质。也就是说,我觉得创建匿名函数通常是不好的做法(只有少数例外)。(我发现 JQuery 最大的错误实际上是在他们的文档中。匿名函数可以存在于失败不会导致有用输出的阴间,但 JQuery 已将它们标准化。)我通常有只使用匿名函数的策略如果我需要使用 Prototype 中的 bindAsListener 之类的东西。

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

同时,我同意有时事情会变得迟钝,尤其是在与他人打交道时。但是杂乱无章的代码就是杂乱无章的代码,除非你自己工作并且是一个优秀的程序员,否则这是无法避免的。

最后,我宁愿用/* */注释掉两三个js文件中的大部分来查找行为不端的代码,然后遍历HTML并删除onclick属性。

于 2009-10-06T19:31:12.007 回答
1

称其为“kool-aid”似乎不公平。DOM Level 2 事件解决了内联事件处理的特定问题,例如总是导致的冲突。我不会回头写代码来使用window.onload它必须检查其他人之前是否分配过它,有时会因为意外或草率而将其覆盖。它还确保更好地分离结构 (HTML) 和行为 (JS) 层。总而言之,这是一件好事。

关于调试,我不认为有任何方法可以解决事件处理程序是匿名函数,除了唠叨作者尽可能使用命名函数。如果可以的话,告诉他们它会产生更有意义的调用堆栈并使代码更易于维护。

于 2009-10-06T18:30:25.363 回答
1

一件事:您不应该通过查看 HTML 代码来了解 JavaScript 中会发生什么。这是什么滋扰?HTML用于结构。

如果您想检查哪些事件绑定到某些元素,现在有一个称为视觉事件的小书签,并且 firebug 1.6 (IIRC) 将具有某种事件检查器。

于 2009-10-06T20:30:47.977 回答