Encuentra eventos adjuntos/con destino de un elemento utilizando herramientas de desarrollo de Chrome/Firebug/IE Barra de herramientas de desarrollador

Al inspeccionar de una página DOM, me gustaría saber el evento (s) adjunto a un elemento de forma rápidaEncuentra eventos adjuntos/con destino de un elemento utilizando herramientas de desarrollo de Chrome/Firebug/IE Barra de herramientas de desarrollador

Por ejemplo, si un botón tiene esta DOM HTML

<button id="button1">Click Me</button>

Y en alguna parte (no en un lugar que yo sepa de antemano) que tiene un evento adjunto, por ejemplo,

$("#button1").click(function(){...});

sé que se puede hacer mediante programación (Can I find events bound on an element with jQuery?)

pero hay una manera de utilizar sólo una de las herramientas de desarrollo para Chrome/Firefox/IE para ver una lista de eventos?

actualización: descubrí que en las versiones más nuevas de Chrome Tengo una pestaña llamada EventListeners pero parece que no permite fácil de perforación hacia abajo todo el camino hasta el origen del evento, como jQuery envuelve el original

Fuente

2012-06-16 Eran Medan

Puede echar un vistazo a la extensión [EventBug] (http://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug) Firebug. Sin embargo, no sé cómo se integra con jQuery. Pero, en general, el soporte para los oyentes de eventos dista mucho de ser bueno en todas las herramientas de desarrollo, desafortunadamente. –

FireQuery - http://firequery.binaryage.com/ le permite ver los eventos ligados a elementos y perforar en ellos

Fuente

2012-07-14 23:43:30 olore

Si existe tal cosa para Chrome (EventListeners que profundiza en el origen del evento), ¡no dude en comentar! –

esta respuesta debe ser deseleccionada, no es para Chrome. –

con el inspector de Chrome seleccione el elemento en la pestaña "elementos" y luego en la pestaña "consola" que pueda ver th e eventos adjuntos al elemento con getEventListeners($0);.

Fuente

2013-09-18 18:19:36 Florent2

getEventListeners solo enumera los eventos vinculados al elemento en sí, no incluye todos los eventos del agente por sus padres. – diyism

+1 por usar $ 0 – ipd

@ipd ¿Qué es $ 0? – Shanimal

Ahora hay una pestaña de Escucha de eventos en Chrome. Event Listeners tab

Fuente

2014-01-21 04:41:41 schmidlop

Tenga en cuenta que en esta pestaña puede filtrar por "Todos los Nodos" o "Sólo Nodos Seleccionados". – chipit24

inútil, ya que todo apunta a jquery. Usando 'firefox developer edition' puedes encontrar el controlador correcto que en mi caso es una vista Backbone. –

para conseguir el primer controlador asociado en los primeros $ ("# botón 1") elemento

$._data($("#button1").get(0),"events").click[0].handler

JSFiddle

La larga historia que nadie quiere escuchar: Vine aquí en busca de un complemento. Estaba emocionado de ver la respuesta de @ schmidlop, pero en jQuery no me da el oyente que estoy buscando, solo muestra el controlador genérico para los eventos jQuery que eventualmente llaman a la devolución de llamada específica. Todavía estoy buscando un complemento de Chrome que me permita hacer clic con el botón derecho en un elemento y permitirme explorar los manejadores conectados al objeto.

Causa que sería genial.

ACTUALIZACIÓN: me encontré con una extensión de Chrome llamada jQuery depurador. Simplemente "Inspeccionar elemento" y elegir la opción "Eventos" jQuery en el submenú "Elementos" ...https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi enter image description here

Fuente

2014-02-06 05:01:44 Shanimal

'$ ._ data ($ (" # button1 "). Get (0)," events "). Haga clic en [0] .handler' funciona muy bien! –

Eso es increíble ... muy ideal ya que no necesito ninguna herramienta. Si la pestaña de escuchas de eventos de Chrome puede hacer esto, ¡sería increíble! –

herramientas para desarrolladores de Firefox ahora muestran un "EV" junto a elementos de los cuales han hecho eventos. Esto se puede utilizar para inspeccionar eventos enlazados (incluidos los eventos jQuery).

Aquí es un ejemplo de inspeccionar el elemento "Primer párrafo" de la jQuery click documentation:

Bound events in Firefox developer tools

Fuente

2015-07-01 02:58:02 djsutho

También puede comprobar complemento visual de eventos disponibles para el cromo.

Fuente

2016-08-17 11:01:28

Encuentra eventos adjuntos/con destino de un elemento utilizando herramientas de desarrollo de Chrome/Firebug/IE Barra de herramientas de desarrollador

Respuesta

Cuestiones relacionadas