¿Cómo averiguar qué eventos de JavaScript se dispararon?


Tengo una lista selecta:

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

Cuando selecciono Closed la página se recarga. En este caso muestra tickets cerrados (en lugar de abiertos). Funciona bien cuando lo hago manualmente.

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

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

Eso generalmente 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 una manera de averiguar qué eventos se definen para un elemento?

Author: Željko Filipin, 2010-09-24

3 answers

Solo pensé en añadir que usted puede hacer esto en Chrome, así:

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

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

Por ejemplo:

  • Haga clic derecho en el botón upvote a la izquierda
  • Seleccione inspeccionar elemento
  • Contraer la sección de estilos (sección en el extremo derecho - doble chevron)
  • Expanda la opción de escucha de eventos
  • Ahora puedes ver los eventos vinculados a la votación positiva
  • No estoy seguro de si es tan potente 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 impresionante es Evento Visual: http://www.sprymedia.co.uk/article/Visual + Evento+2

    Resalta todos los los elementos de una página que han sido enlazados y tiene ventanas emergentes que muestran las funciones que se llaman. Bastante ingenioso para un marcador! Hay un complemento de Chrome también si eso es más lo tuyo, no estoy seguro de otros navegadores.

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

     116
    Author: Chris,
    Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
    2017-05-23 12:18:24

    Parece que Firebug (Firefox add-on) tiene la respuesta:

    • abra 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 Persist en la pestaña Consola (de lo contrario, la pestaña Consola se borrará después de que se vuelva a cargar la página)
    • seleccione Closed (manualmente)
    • Habrá algo como esto en la pestaña de 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: Sugerencia Firebug: Registrar eventos

     112
    Author: Željko Filipin,
    Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
    2010-09-24 13:44:58

    Con respecto a Chrome, comprueba monitorEvents() a través de la API de línea de comandos.

    • Abra la consola a través del menú > Herramientas > Consola JavaScript.
    • Enter 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 documentación . Supongo que esta característica se agregó después de la respuesta anterior.

     60
    Author: AnonymousAndrew,
    Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
    2013-11-05 16:18:08