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

validar formulario javascript html5

Question

Tengo una lista de selección:

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

Cuando selecciono Closed la página vuelve a cargar. 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 seleccioné Closed con Watir :

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

Eso generalmente significa que algún evento de JavaScript no se activa. 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?

Answer 1

Con respecto a Chrome, revise el monitorEvents () a través de la línea de comando API.

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

• Ver la consola inundada de eventos

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

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

Answer 2

Parece que Firebug (complemento de Firefox) tiene la respuesta:

• abrir Firebug
• haga clic derecho en el elemento en la pestaña HTML
• haga clic en Log Events
• habilitar la pestaña Consola
• haga clic en Persistir 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 así 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: Consejo de Firebug: Eventos de registro

Answer 3

Solo pensé en agregar que también puedes hacer esto en Chrome:

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 con el botón derecho en el elemento y luego examinando sus propiedades (el panel a la derecha).

Por ejemplo:

Haga clic derecho en el botón de reenvío a la izquierda

Seleccionar elemento de inspección

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

Expande la opción de detectores de eventos

Ahora puedes ver los eventos vinculados al voto popular

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

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

Resalta todos los elementos en una página que se han enlazado y tiene elementos emergentes que muestran las funciones que se llaman. ¡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