Просмотреть все события dom для элемента

Question

У меня есть jQuery UI datepicker, который, когда вы нажимаете на дату, очищает мой URL-адрес до # и не меняет дату в текстовом поле.

Я предполагаю, что есть какая-то другая утилита JavaScript, где есть какое-то делегированное событие, которое также вызывается, бросает ошибку и убивает обработчик jquery.

Как я могу просмотреть и делегировать все делегированные события этот элемент dom.

Answer 1

инструменты Dev Chrome может помочь с этим:

1. Точка Chrome на странице
2. правой кнопкой мыши на дату в DatePicker JQuery UI и выберите «проверить элемент».
3. С правой стороны есть гармоник с различными вещами. Рядом с дном находится «Слушатели событий». (Текущие версии инструментов разработчика Chrome очень хорошо разбираются в этом, в том числе запрашивая цепочку обработчиков jQuery.)
4. Разверните элемент дерева «Слушатели событий», и вы увидите список связанных событий, связанных с этим элементом, даже если обработчик не определен специально для , что элемент. (Например, если вы сделали это с помощью кнопки upvote на вопросе, вы увидите, что click подключен как к a.vote-up-off, так и document.) Таким образом, вы можете обойти их, чтобы увидеть, какие прямые и делегированные обработчики связаны с этим событием для этого элемент.

Кроме этого, вы можете использовать неинфицированную версию jQuery и пройти через диспетчер событий, когда вы нажимаете дату в datepicker.

И, конечно, Gabe's shown Как вы можете получить обработчики jQuery-специфики через недокументированные данные jQuery events. (Это не покажет вам делегированные обработчики (если вы не ходите по дереву предков) и не покажете вам обработчики, не связанные с jQuery, которые могут быть прикреплены, но это все еще довольно полезный материал.)

Answer 2

С помощью jQuery вы можете увидеть все события элементов, обратившись к ключу данных events.

jsFiddle

Пример:

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'); 
}