¿Sabes lo que más me gustó de JavaScript molesto? Siempre supiste lo que iba a hacer cuando desencadenabas un evento.

<a onclick="thisHappens()" />

Ahora que todos están bebiendo la discreta ayuda de Kool, no es tan obvio. Las llamadas para vincular eventos pueden ocurrir en cualquier línea de cualquier cantidad de archivos javascript que se incluyan en su página. Esto podría no ser un problema si usted es el único desarrollador, o si su equipo tiene algún tipo de convención para vincular controladores de eventos, como usar siempre un cierto formato de clase CSS. Sin embargo, en el mundo real, hace que sea difícil entender su código.

Los navegadores DOM como Firebug parecen que podrían ayudar, pero todavía lleva mucho tiempo explorar todas las propiedades del controlador de eventos de un elemento solo para encontrar uno que ejecute el código que está buscando. Incluso entonces, generalmente solo te dice que es una función anónima () sin número de línea.

La técnica que he encontrado para descubrir qué código JS se ejecuta cuando se desencadenan los eventos es utilizar la herramienta de creación de perfiles de Safari, que puede indicarle qué JS se ejecuta en un determinado período de tiempo, pero a veces puede ser mucho JS buscar .

Debe haber una forma más rápida de descubrir qué sucede cuando hago clic en un elemento. ¿Puede alguien por favor iluminarme?

6
Jesse Hattabaugh 6 oct. 2009 a las 22:18

5 respuestas

La mejor respuesta

Si está utilizando jQuery, puede aprovechar su avanzado sistema de eventos e inspeccionar los cuerpos de funciones de los controladores de eventos adjuntos:

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

O podría implementar su propio sistema de eventos.

4
meder omuraliev 6 oct. 2009 a las 18:36

Una cosa: no debería poder ver lo que sucederá en JavaScript mirando el código HTML. ¿Qué molestia es eso? HTML es para estructura.

Si desea verificar qué eventos están vinculados a ciertos elementos, hay un bookmarklet llamado evento visual por ahora, y firebug 1.6 (IIRC) tendrá algún tipo de inspector de eventos.

1
wildcard 6 oct. 2009 a las 20:30

Llamarlo "kool-aid" parece injusto. Los eventos DOM Nivel 2 resuelven problemas específicos con el manejo de eventos en línea, como los conflictos que siempre resultan. No recuerdo volver a escribir código para usar window.onload que tiene que verificar si alguien más lo ha asignado antes, y algunas veces anularlo por accidente o por descuido. También asegura una mejor separación de las capas de estructura (HTML) y comportamiento (JS). En general, es algo bueno.

Con respecto a la depuración, no creo que haya ninguna forma de resolver que los controladores de eventos sean funciones anónimas, aparte de molestar a los autores para que usen funciones con nombre cuando sea posible. Si puede, dígales que produce pilas de llamadas más significativas y hace que el código sea más fácil de mantener.

1
slikts 6 oct. 2009 a las 18:30

Para responder a su pregunta, intente usar la línea de comando Firebug. Esto le permitirá usar JavaScript para capturar rápidamente un elemento por una ID y luego iterar a través de sus oyentes. A menudo, si se usa con console.log, incluso podrá obtener las definiciones de funciones.


Ahora, para defender la discreta:

El beneficio que encuentro en JavaScript discreto es que es mucho más fácil para mí ver el DOM por lo que es. Dicho esto, creo que generalmente es mala práctica crear funciones anónimas (con pocas excepciones). (La falla más grande que encuentro con JQuery está realmente en su documentación. Las funciones anónimas pueden existir en un mundo inferior donde la falla no conduce a resultados útiles, sin embargo, JQuery las ha convertido en estándar). Generalmente tengo la política de usar solo funciones anónimas si necesito usar algo como bindAsListener de Prototype.

Además, si los archivos JS se dividen correctamente, solo abordarán un subconjunto del DOM a la vez. Tengo una biblioteca de "casilla de verificación ordenada", está en solo un archivo JS que luego se reutiliza en otros proyectos. En general, también tendré todos los métodos de una sub-biblioteca dada como métodos miembros de un objeto JSON o una clase y tengo un objeto / clase por archivo js (como si estuviera haciendo todo en un lenguaje más formalizado ) Si tengo una pregunta sobre mi "código de validación de formulario", miraré el objeto formValidation en formvalidation.js.

Al mismo tiempo, estaré de acuerdo en que a veces las cosas pueden volverse obtusas de esta manera, especialmente cuando se trata con otros. Pero el código desorganizado es un código desorganizado, y es imposible de evitar a menos que trabaje solo y sea un buen programador.

Al final, sin embargo, preferiría usar /* */ para comentar la mayoría de los dos o tres archivos js para encontrar código que se comporta mal, luego pasar por el HTML y eliminar los atributos onclick.

2
cwallenpoole 6 oct. 2009 a las 19:31

Consulte Visual Event... es un bookmarklet que puede usar para exponer eventos en una página.

8
Mottie 6 oct. 2009 a las 19:25