¿Cómo saber qué eventos de JavaScript se activaron?

100

Tengo una lista de selección:¿Cómo saber qué eventos de JavaScript se activaron?

<select id="filter"> 
    <option value="Open" selected="selected">Open</option> 
    <option value="Closed">Closed</option> 
</select>

Cuando selecciono Closed vuelve a cargar la página. En este caso, muestra entradas cerradas (en lugar de abiertas). Funciona bien cuando lo hago de forma manual.

El problema es que la página no se recarga cuando selecciono Closed con Watir:

browser.select_list(:id => "filter").select "Closed"

Que por lo general significa que algún evento JavaScript no se dispara. Puedo disparar eventos con Watir:

browser.select_list(:id => "filter").fire_event "onclick"

pero necesito saber qué evento disparar.

¿Hay alguna forma de averiguar qué eventos se definen para un elemento?

Fuente

2010-09-24 Željko Filipin

Esta pregunta enumera más herramientas: http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool –

Evento visual, http: //www.sprymedia.co.uk/article/Visual+Event. Estoy seguro de que eso ayudará a la mitad de la gente a aterrizar en esta página Stackoverflow :) – Cedric

111

Parece que Firebug (Firefox) tiene la respuesta:

Firebug abierta
clic derecho en el elemento de la ficha HTML
clic Log Events
permiten ficha Consola
clic Persista en la pestaña Consola (de lo contrario, la pestaña Consola se borrará después de que la página se vuelva a cargar)
seleccione Closed (manualmente)

habrá algo como esto en la pestaña Consola:

... 
mousemove clientX=1097, clientY=292 
popupshowing 
mousedown clientX=1097, clientY=292 
focus 
mouseup clientX=1097, clientY=292 
click clientX=1097, clientY=292 
mousemove clientX=1096, clientY=293 
...

Fuente: Firebug Tip: Log Events

Fuente

2010-09-24 13:32:02

Muchas gracias, no sabía acerca de esa característica de Firebug. Tal vez necesito RTFM realmente algún tiempo. –

No sabía nada de eso hasta hace unos minutos. Estaba escribiendo la pregunta y encontré la respuesta en el camino. :) –

Su pregunta se parece mucho a la mía (autoconfianza, con auto-comentarios). – vol7ron

106

Sólo quería añadir que se puede hacer esto en Chrome, así :

Ctrl +Shift +I (Herramientas del desarrollador)> Fuentes> Puntos de interrupción del detector de eventos (a la derecha).

También puede ver todos los eventos que ya se han adjuntado simplemente haciendo clic derecho sobre el elemento y luego navegando por sus propiedades (el panel de la derecha).

Por ejemplo:

Haga clic derecho sobre el botón upvote a la izquierda

Seleccionar inspeccionar elemento

Contraer la sección de estilos (sección en el extremo derecho - doble chevron)

Expandir la opción de detectores de eventos

ahora se puede ver los eventos ligados a la upvote

No estoy seguro si es tan poderoso como la opción Firebug, pero ha sido suficiente para que la mayoría de mis cosas.

Otra opción que es un poco diferente, pero sorprendentemente impresionante es Visual Evento: http://www.sprymedia.co.uk/article/Visual+Event+2

Resalta todos los elementos de una página que han sido unidas y tiene panecillos que muestran las funciones que son llamadas. ¡Bastante ingenioso para un marcador! También hay un complemento de Chrome si eso es más importante: no estoy seguro acerca de otros navegadores.

AnonymousAndrew también ha señalado monitorEvents(window);here

Fuente

2011-09-05 02:02:01 Chris

No pude encontrar la manera de ver qué eventos se activaron con cualquiera de las formas que sugirió. –

Actualización: no es 'Scripts' dentro de las herramientas Dev (o inspector), tienes que entrar en' Fuentes' y luego mirar el menú de la derecha. – aledalgrande

@aledalgrande Gracias, se han actualizado. (Para cualquiera que lea, esto solo se aplica a la primera solución, el segundo todavía usa el inspector). – Chris

En cuanto a Chrome, partida de los monitorEvents() a través de la API de línea de comandos.

Abra la consola a través de Menú> Herramientas> Consola de JavaScript.
Introduzca monitorEvents(window);

Ver la consola inundado de eventos

... 
mousemove MouseEvent {dataTransfer: ...} 
mouseout MouseEvent {dataTransfer: ...} 
mouseover MouseEvent {dataTransfer: ...} 
change Event {clipboardData: ...} 
...

Hay otros ejemplos en el documentation. Supongo que esta característica se agregó después de la respuesta anterior.

Fuente

2013-11-05 16:18:08 AnonymousAndrew

¡Agradable! En conjunción con jQuery: 'monitorEvents ($ ('# element'). Get())' – Klaus

¿Cómo saber qué eventos de JavaScript se activaron?

Respuesta

Cuestiones relacionadas