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

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
});

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