不显眼的 Javascript 混淆了事件处理

发布于 2024-08-06 19:19:45 字数 538 浏览 7 评论 0原文

你知道我最喜欢引人注目的 javascript 的什么吗？当你触发一个事件时，你总是知道它会做什么。

<a onclick="thisHappens()" />

现在每个人都在喝这种不引人注目的酷爱饮料，这一点就不那么明显了。对绑定事件的调用可以发生在页面中包含的任意数量的 javascript 文件的任意行上。如果您是唯一的开发人员，或者您的团队有某种绑定事件处理程序的约定（例如始终使用某种格式的 CSS 类），那么这可能不是问题。但在现实世界中，这使得理解您的代码变得困难。

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

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

必须有一种更快的方法来了解单击某个元素时发生的情况。有人可以启发我吗？

原文

You know what I liked best about obtrusive javascript? You always knew what it was going to do when you triggered an event.

<a onclick="thisHappens()" />

Now that everybody's drinking the unobtrusive kool-aid it's not so obvious. Calls to bind events can happen on any line of any number of javascript file that get included on your page. This might not be a problem if you're the only developer, or if your team has some kind of convention for binding eventhandlers like always using a certain format of CSS class. In the real world though, it makes it hard to understand your code.

DOM browsers like Firebug seem like they could help, but it's still time consuming to browse all of an element's event handler properties just to find one that executes the code you're looking for. Even then it usually just tells you it's an anonymous function() with no line number.

The technique I've found for discovering what JS code gets executed when events are triggered is to use Safari's Profiling tool which can tell you what JS gets executed in a certain period of time, but that can sometimes be a lot of JS to hunt through.

There's got to be a faster way to find out what's happening when I click an element. Can someone please enlighten me?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最后的乘客 2024-08-13 19:19:45

查看 Visual Event...这是一个书签，您可以使用它来公开事件一页。

回复收藏 0 原文

眸中客 2024-08-13 19:19:45

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

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

If you're using jQuery you can take advantage of its advanced event system and inspect the function bodies of event handlers attached:

$('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
});

Or you could implement your own event system.

回复收藏 0 原文

不再见 2024-08-13 19:19:45

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

现在，为不显眼的东西辩护：

我发现不显眼的 JavaScript 的好处是，我可以更轻松地了解 DOM 的本质。也就是说，我认为创建匿名函数通常是不好的做法（只有少数例外）。（我发现 JQuery 最大的错误实际上是在他们的文档中。匿名函数可以存在于地狱中，失败不会导致有用的输出，但 JQuery 已经使它们成为标准。）我通常有只使用匿名函数的政策如果我需要使用Prototype 中的bindAsListener 之类的东西。

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

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

但最后，我宁愿使用 /* */ 注释掉两个或三个 js 文件中的大部分以查找行为不当的代码，然后检查 HTML 并删除 onclick 属性。

回复收藏 0 原文

饭团 2024-08-13 19:19:45

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

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

回复收藏 0 原文