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

У меня есть JQuery UI DatePicker, который, когда вы нажимаете на дату, очищает мой URL-хэш#и не изменяет дату в текстовом поле.

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

Как я могу пройти, и / или увидеть все делегированные события совпадаютthis dom element.

 sachleen18 июн. 2012 г., 18:31
Не знаю об этом, но вы можете открыть инструменты разработчика Chrome, перейти на вкладку «Сценарии», поставить точку останова в коде выбора даты и пройтись по коду JS, чтобы посмотреть, что будет выполнено.

Ответы на вопрос(2)

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');   
}
 18 июн. 2012 г., 18:42
Я неправильно понял, думал, что вы ищете программное решение, а не инструмент отладки :)
 Adam Rackis18 июн. 2012 г., 18:36
Это также поднимет делегированные события? т.е.$(document).on("click", "a", function() { ... });  если#myelement якорь, он покажет этот обработчик?
 18 июн. 2012 г., 18:41
@AdamRackis: Нет, это не так. Он покажет вам только обработчики, подключенные напрямую, а не обработчики, расположенные дальше по дереву, которые также могут вызываться:jsbin.com/ujipuz Конечно, это не означает, что вы не можете пройтись по предкам элемента и повторить процесс для каждого из них, что даст вам полную картину. +1 к Гейбу
 Adam Rackis18 июн. 2012 г., 18:44
@Gabe - не беспокойся - твой ответ на самом деле довольно полезен, даже если он не относится к моему конкретному случаю. Благодарю.
Решение Вопроса

Point Chrome at the page Right-click the date in the jQuery UI datepicker and choose "inspect element". On the far right-hand side, there's an accordian with various things. Near the bottom is "Event Listeners". (Current versions of Chrome's dev tools are very smart about this, including querying jQuery's handler chain.) Expand the "Event Listeners" tree item and you'll see a list of hooked events related to that element, even if the handler isn't set specifically on that element. (For instance, if you did this with the upvote button on the question, you'd see that click is hooked both for a.vote-up-off and document.) So you can kick around those to see what direct and delegated handlers relate to that event for that element.

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

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

 Adam Rackis18 июн. 2012 г., 18:37
Ты бог среди людей, TJ. Спасибо как всегда.
 18 июн. 2012 г., 18:39
@AdamRackis: LOL Не беспокойся, надеюсь, это поможет.

Ваш ответ на вопрос