Ver todos los eventos dom para un elemento

Question

Tengo un datepicker jQuery UI que, al hacer clic en una fecha, borra mi hash URL a #, y no cambia la fecha en el cuadro de texto.

Supongo que hay alguna otra utilidad de JavaScript en alguna parte que tenga algún tipo de evento delegado que también se llame, genere un error y mate al controlador jquery.

¿Cómo puedo recorrer, o ver todos los eventos delegados coincide este elemento dom.

Answer 1

herramientas dev de Chrome pueden ayudar con º es:

1. Punto de Chrome en la página
2. Haga clic derecho en la fecha en el selector de fechas jQuery UI y seleccione "inspeccionar elemento".
3. En el extremo derecho, hay un accordian con varias cosas. Cerca de la parte inferior está el "Oyente del evento". (Las versiones actuales de las herramientas de desarrollo de Chrome son muy inteligentes al respecto, incluida la consulta de la cadena de controladores de jQuery).
4. Expande el elemento del árbol "Escuchas de eventos" y verás una lista de eventos enganchados relacionados con ese elemento, incluso si el controlador no está configurado específicamente en ese elemento. (Por ejemplo, si hiciste esto con el botón de respuesta a la pregunta, verías que click está enganchado tanto para a.vote-up-off como para document). Así puedes evitarlos para ver qué manejadores directos y delegados se relacionan con ese evento para ese elemento.

Aparte de eso, podría usar la versión no minificada de jQuery y caminar a través del despacho del evento cuando haga clic en la fecha en el selector de fecha.

Y por supuesto, Gabe's shown cómo puede obtener los manejadores específicos de jQuery a través de los datos de jQuery events no documentados. (Eso no mostrará los controladores delegados (a menos que recorras el árbol ancestro), y no te mostrará controladores que no sean jQuery que puedan estar adjuntos, pero aún así es bastante útil.)

Answer 2

Con jQuery puede ver todos los eventos de elementos accediendo a la clave events de los datos.

jsFiddle

Ejemplo:

HTML

<input type="text" id="myelement" />​ 

JS

$(function() { 


    var myelement = $('#myelement'); 
    myelement.click(function() { 

     console.log('anonymous event'); 

    }); 

    myelement.click(anotherEvent); 
    myelement.change(anotherEvent); 

    var events = myelement.data('events'); 

    console.log('Number of click events:' + events.click.length); 
    console.log('Number of change events:' + events.change.length); 

}); 

function anotherEvent(){ 
    console.log('another event'); 
}