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

122

Tengo una lista selecta:

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

Cuando selecciono Closedla página se vuelve a cargar. 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 Closedcon Watir :

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

Eso generalmente significa que no se activa algún evento de JavaScript. Puedo disparar eventos con Watir:

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

pero necesito saber qué evento disparar.

¿Hay alguna manera de averiguar qué eventos están definidos para un elemento?

javascript events watir dom-events browser-automation Željko Filipin
fuente
Esta pregunta enumera más herramientas: stackoverflow.com/questions/570960/…
Željko Filipin
2
Evento visual, sprymedia.co.uk/article/Visual+Event . Estoy seguro de que eso ayudará a la mitad de las personas que llegan a esta página de stackoverflow :)
Cedric

Respuestas:

143

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

Ctrl+ Shift+ I(Herramientas para desarrolladores)> Fuentes> Puntos de interrupción de escucha 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 examinando sus propiedades (el panel de la derecha).

Por ejemplo:

  • Haga clic derecho en el botón de voto a la izquierda
  • Seleccionar elemento de inspección
  • Contraer la sección de estilos (sección en el extremo derecho - doble chevron)
  • Expanda la opción de oyentes de eventos
  • Ahora puedes ver los eventos vinculados al voto positivo

    • No estoy seguro de 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

    Destaca todos los elementos de una página que se han vinculado 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 lo que más te gusta, no estoy seguro de otros navegadores.

    Anónimo Andrew también ha señalado aquímonitorEvents(window);

    Chris
    fuente
    2
    No pude averiguar cómo ver qué eventos se dispararon con cualquiera de las formas que ha sugerido.
    Željko Filipin
    1
    Actualización: no está Scriptsdentro de las herramientas de desarrollo (o inspector), debe ingresar Sourcesy luego mirar el menú a la derecha.
    aledalgrande
    @aledalgrande Gracias, he actualizado. (Para cualquiera que lea, esto solo se aplica a la primera solución, la segunda aún usa el inspector).
    Chris
    1
    ¿Hay alguna razón específica por la que elegiste el botón de votación como ejemplo? : P
    George Dimitriadis
    @GeorgeDimitriadis jaja surgió: P
    Chris
    112

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

    • abrir Firebug
    • haga clic derecho en el elemento en la pestaña HTML
    • hacer clic 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 volver a cargar la página)
    • seleccionar 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: Eventos de registro

    Željko Filipin
    fuente
    44
    Muchas gracias, no sabía sobre esa característica de Firebug. Quizás necesito realmente RTFM algún tiempo.
    Marcel Korpel
    No lo supe hasta hace unos minutos. Estaba escribiendo la pregunta y encontré la respuesta en el camino. :)
    Željko Filipin
    2
    Una entrada reciente del blog del desarrollador de Firebug: softwareishard.com/blog/firebug/firebug-tip-log-dom-events
    jakub.g
    1
    Hola, intenté hacer clic con el botón derecho en firebug, pero no puedo encontrar la opción Registrar eventos, ¿pueden ayudarme a encontrar esta?
    Rajagopalan
    2
    Hola, el complemento Firbug ya no existe. Entonces, ¿cómo debo lograr esto? Por favor
    ayúdenme
    71

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

    • Abra la consola a través de Menú> Herramientas> Consola de JavaScript.
    • Entrar 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.

    AnónimoAndrew
    fuente
    55
    ¡Agradable! En conjunción con jQuery:monitorEvents($('#element').get())
    Klaus
    1
    Para detener el uso de monitoreounmonitorEvents(window)
    Augustas
    0

    Puede usar getEventListeners en su consola de desarrollador de Google Chrome .

    getEventListeners (object) devuelve los detectores de eventos registrados en el objeto especificado.

    getEventListeners(document.querySelector('option[value=Closed]'));
    JSON C11
    fuente