TL;DR
- Escucha a los eventos de un tipo determinado mediante
monitorEvents(). - Usa
unmonitorEvents()para dejar de escuchar. - Obtén receptores de un elemento del DOM mediante
getEventListeners(). - Usa el panel Event Listeners Inspector para obtener información acerca de receptores de eventos.
Controla los eventos
El método monitorEvents() le indica a DevTools que registre información sobre los objetivos especificados.
El primer parámetro es el objeto a controlar. Se muestran todos los eventos si no se proporciona un segundo parámetro. Para especificar qué eventos escuchar, pasa una cadena o una matriz de cadenas como segundo parámetro.
Escucha a los eventos de clic en el cuerpo de la página:
monitorEvents(document.body, "click");
Si el evento controlado es un tipo de evento admitido que DevTools asigna a un conjunto de nombres de eventos estándar, el método escucha a los eventos de ese tipo.
Command Line API cuenta con una admisión completa de tipos de eventos para los eventos que cubren.
Para detener el control de eventos,
llama al método unmonitorEvents() y proporciónale el objeto para dejar de controlar.
Deja de escuchar eventos en el objeto body :
unmonitorEvents(document.body);
Ver receptores de eventos registrados en objetos
La API getEventListeners() muestra los receptores de eventos registrados en el objeto especificado.
El valor mostrado es un objeto que contiene una matriz para cada tipo de evento registrado (por ejemplo, click okeydown).
Los miembros de cada matriz son objetos que describen
al receptor registrado para cada tipo.
Por ejemplo,
el siguiente código enumera todos los receptores de eventos registrados en el objeto del documento:
getEventListeners(document);
Si más de un receptor está registrado en el objeto especificado,
la matriz contiene un miembro para cada receptor.
En el siguiente ejemplo
hay dos receptores de eventos registrados en el elemento #scrollingList para el mousedown evento:
Además, amplía cada uno de estos objetos para explorar sus propiedades.
Ver los receptores de eventos registrados en los elementos del DOM
De manera predeterminada, el panel Event Listeners en Elements Inspector muestra todos los eventos adjuntados a una página:
El filtro limita los eventos al nodo seleccionado:
Al expandir el objeto, el panel muestra los detalles del receptor de eventos. En este ejemplo, la página tiene dos receptores de eventos adjuntados a través de jQuery:
