У меня есть страница, где некоторые слушатели событий прикреплены к полям ввода и полям выбора. Есть ли способ узнать, какие слушатели событий наблюдают за конкретным узлом DOM и для какого события?
События прикрепляются с использованием:
- Прототип
Event.observe
; - DOM's
addEventListener
; - Как атрибут элемента
element.onclick
.
javascript
events
dom
Navneet
источник
источник
element.addEventListener(type, callback, [bubble])
, при этом ониelement.onclick = function
будут перезаписываться при каждом назначении.Ответы:
Если вам просто нужно проверить, что происходит на странице, вы можете попробовать букмарклет Visual Event .
Обновление : доступно визуальное событие 2
источник
EventBug
плагин Firebug .Это зависит от того, как прикреплены события. Для иллюстрации предположим, что у нас есть следующий обработчик кликов:
Мы собираемся прикрепить его к нашему элементу, используя разные методы, некоторые из которых позволяют проверять, а некоторые нет.
Метод А) один обработчик события
Метод Б) несколько обработчиков событий
Метод C): jQuery
1.3.x
1.4.x (хранит обработчик внутри объекта)
(См.
jQuery.fn.data
ИjQuery.data
)Метод D): прототип (грязный)
1.5.x
От 1.6 до 1.6.0.3 включительно (здесь очень сложно)
1.6.1 (немного лучше)
источник
addEventListener
?.data('events')
как это было раньше. Чтобы получить доступ к внутренним данным события, используйте$._data(elem, 'events')
. Обратите внимание, что эта функция помечена «только для внутреннего использования» в исходном коде jQuery, поэтому нет никаких обещаний, что она всегда будет работать в будущем, но я полагаю, что она работает с jQuery 1.7 и работает до сих пор.Поддержка Chrome, Firefox, Vivaldi и Safari
getEventListeners(domElement)
в консоли инструментов разработчика.Для большинства целей отладки это можно использовать.
Ниже очень хорошая ссылка для его использования: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners
источник
getEventListeners(object)
obj getEventListeners()
var list = getEventListeners(document.getElementById("YOURIDHERE")); console.log(list["focus"][0]["listener"].toString())
. Измените «фокус» на событие, которое вы хотите проверить, и на номер, если на одном событии присутствуют несколько слушателей.getEventListeners($0)
получите прослушиватели событий для элемента, на котором вы сосредоточены в инструментах разработчика Chrome. Я использую это все время. Не люблю использовать функцииИнспектор WebKit в браузерах Chrome или Safari теперь делает это. Он отобразит прослушиватели событий для элемента DOM, когда вы выберете его на панели элементов.
источник
Можно перечислить всех слушателей событий в JavaScript: это не так сложно; вам просто нужно взломать
prototype
метод HTML элементов ( перед добавлением слушателей).Теперь у каждого элемента привязки (
a
) будетlastListenerInfo
свойство, содержащее всех его слушателей. И это даже работает для удаления слушателей с анонимными функциями.источник
Node.prototype
вместо этого? Вот откуда иHTMLAnchorElement
наследует.addEventListener
.Используйте getEventListeners в Google Chrome :
источник
(Переписать ответ на этот вопрос, поскольку он уместен здесь.)
При отладке, если вы просто хотите увидеть события, я рекомендую либо ...
Если вы хотите использовать события в своем коде и используете jQuery до версии 1.8 , вы можете использовать:
чтобы получить события. Начиная с версии 1.8, использование .data («события») прекращено (см. Эту заявку об ошибке ). Ты можешь использовать:
Другой пример: записать все события кликов по определенной ссылке в консоли:
(см. http://jsfiddle.net/HmsQC/ для рабочего примера)
К сожалению, при использовании данных $ ._ это не рекомендуется, за исключением отладки, поскольку это внутренняя структура jQuery, и она может измениться в будущих выпусках. К сожалению, я не знаю других легких способов доступа к событиям.
источник
$._data(elem, "events")
не работает с jQuery 1.10, по крайней мере, для событий, зарегистрированных с использованием$(elem).on('event', ...)
. Кто-нибудь знает, как их отладить?$._data
может быть элемент, а не объект jQuery. Так что я должен исправить свой пример выше, чтобы бытьconsole.log($._data($myLink[0], "events").click);
1:
Prototype.observe
использует Element.addEventListener (см. Исходный код )2: Вы можете переопределить,
Element.addEventListener
чтобы запомнить добавленных слушателей (удобное свойствоEventListenerList
было удалено из предложения спецификации DOM3). Запустите этот код, прежде чем какое-либо событие будет прикреплено:Читать все события по:
И не забудьте переопределить,
Element.removeEventListener
чтобы удалить событие из пользовательскогоElement.eventListenerList
.3:
Element.onclick
собственность нуждается в особом уходе здесь:4: не забывайте
Element.onclick
атрибут содержимого: это две разные вещи:Так что вам тоже нужно с этим справиться:
Букмарклет Visual Event (упомянутый в самом популярном ответе) крадет только кэш пользовательского обработчика библиотеки:
Переопределение элементов может быть сомнительным (т. Е. Потому, что есть некоторые специфические функции DOM, такие как живые коллекции, которые не могут быть закодированы в JS), но он изначально поддерживает eventListenerList и работает в Chrome, Firefox и Opera (не работает в IE7 ).
источник
Вы можете обернуть нативные методы DOM для управления слушателями событий, поместив это в верхнюю часть вашего
<head>
:H / T @ les2
источник
Инструменты разработчика Firefox теперь делают это. События отображаются нажатием кнопки «ev» справа от каждого элемента, включая события jQuery и DOM .
источник
Если у вас есть Firebug , вы можете использовать
console.dir(object or array)
для печати хорошего дерева в журнале консоли любого скаляра JavaScript, массива или объекта.Пытаться:
или
источник
Полностью рабочее решение, основанное на ответе Яна Турона - ведет себя как
getEventListeners()
из консоли:(Есть небольшая ошибка с дубликатами. В любом случае, она не сильно ломается.)
Применение:
someElement.getEventListeners([name])
- вернуть список слушателей события, если установлено имя, вернуть массив слушателей для этого событияsomeElement.clearEventListeners([name])
- удалить все прослушиватели событий, если установлено имя, удалить только прослушиватели для этого событияисточник
body
иdocument
элементах.Opera 12 (не последняя версия на основе движка Chrome Webkit) Dragonfly некоторое время имела это и, очевидно, отображается в структуре DOM. На мой взгляд, это превосходный отладчик, и это единственная причина, по которой я до сих пор использую версию для Opera 12 (версии v13, v14 нет, а в версии 15 для Webkit отсутствует Dragonfly)
источник
Прототип 1.7.1 способ
источник
Я недавно работал с событиями и хотел просмотреть / контролировать все события на странице. Посмотрев на возможные решения, я решил пойти своим путем и создать собственную систему мониторинга событий. Итак, я сделал три вещи.
Во-первых, мне был нужен контейнер для всех прослушивателей событий на странице: это
EventListeners
объект. Она состоит из трех полезных методов:add()
,remove()
, иget()
.Затем я создал
EventListener
объект для хранения информации , необходимой для этого события, а именно:target
,type
,callback
,options
,useCapture
,wantsUntrusted
, и добавил методremove()
для удаления слушателя.Наконец, я расширил native
addEventListener()
иremoveEventListener()
методы, чтобы они работали с объектами, которые я создал (EventListener
иEventListeners
).Применение:
addEventListener()
создаетEventListener
объект, добавляет егоEventListeners
и возвращаетEventListener
объект, чтобы его можно было удалить позже.EventListeners.get()
может быть использован для просмотра слушателей на странице. Он принимаетEventTarget
или строку (тип события).демонстрация
Допустим, мы хотим знать каждого слушателя событий на этой текущей странице. Мы можем сделать это (при условии, что вы используете расширение диспетчера сценариев, в данном случае Tampermonkey). Следующий скрипт делает это:
И когда мы перечисляем всех слушателей, там говорится, что есть 299 слушателей событий. «Кажется» есть несколько дубликатов, но я не знаю, действительно ли они дубликаты. Не каждый тип события дублируется, поэтому все эти «дубликаты» могут быть отдельными слушателями.
Код можно найти в моем хранилище. Я не хотел размещать это здесь, потому что это довольно долго.
Обновление: это не похоже на работу с jQuery. Когда я проверяю EventListener, я вижу, что обратный вызов
Я считаю, что это принадлежит JQuery, а не реальный обратный вызов. jQuery сохраняет фактический обратный вызов в свойствах EventTarget:
Чтобы удалить прослушиватель событий, фактический обратный вызов должен быть передан
removeEventListener()
методу. Так что для того, чтобы заставить это работать с jQuery, он нуждается в дальнейшей модификации. Я мог бы исправить это в будущем.источник
Я пытаюсь сделать это в jQuery 2.1, и с помощью
$().click() -> $(element).data("events").click;
метода " " это не работает.Я понял, что в моем случае работают только функции $ ._ data ():
источник
Существует хорошее расширение jQuery Events :
( источник темы )
источник
изменение этих функций позволит вам регистрировать добавленные слушатели:
читать остальным слушателям с
источник