У меня есть страница, где некоторые слушатели событий прикреплены к полям ввода и полям выбора. Есть ли способ узнать, какие слушатели событий наблюдают за определенным узлом DOM и для какого события?
События привязываются с помощью:
Event.observe
;addEventListener
;element.onclick
.Если вам просто нужно проверить, что происходит на странице, вы можете попробовать букмарклет Visual Event.
Обновление: Visual Event 2 доступен;
Это зависит от того, как привязаны события. Для примера предположим, что у нас есть следующий обработчик щелчка:
var handler = function() { alert('clicked!') };
Мы собираемся прикрепить его к нашему элементу, используя различные методы, некоторые из которых допускают проверку, а некоторые нет.
Метод A) одиночный обработчик события
element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"
Метод B) несколько обработчиков событий
if(element.addEventListener) { // DOM standard
element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers
Метод C): jQuery
$(element).click(handler);
1.3.x
// осмотр
var clickEvents = $(element).data("events").click;
jQuery.each(clickEvents, function(key, value) {
alert(value) // оповещения "function() { alert('clicked!') }"
})
1.4.x (хранит обработчик внутри объекта)
// осмотр
var clickEvents = $(element).data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
alert(handlerObj.handler) // оповещения "function() { alert('clicked!') }"
// также доступны: handlerObj.type, handlerObj.namespace
})
(См. jQuery.fn.data
и jQuery.data
)
Метод D): Прототип (грязный)
$(element).observe('click', handler);
1.5.x
// осмотр
Event.observers.each(function(item) {
if(item[0] == element) {
alert(item[2]) // оповещения "function() { alert('clicked!') }"
}
})
1.6 до 1.6.0.3 включительно (здесь возникли большие трудности)
// проверьте. "_eventId" для < 1.6.0.3, пока
// "_prototypeEventID" был введен в 1.6.0.3
var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
clickEvents.each(function(wrapper){
alert(wrapper.handler) // оповещения "function() { alert('clicked!') }"
})
1.6.1 (немного лучше)
// осмотр
var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
clickEvents.each(function(wrapper){
alert(wrapper.handler) // оповещения "function() { alert('clicked!') }"
})
Хром, Firefox, Вивальди и поддержку сафари `getEventListeners(параметр domelement) в Инструменты разработчика консоли.
Для большинства целей отладки, это может быть использовано.
Ниже есть очень хороший справочник, чтобы использовать его: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners
Можно перечислить все мероприятия слушателям в JavaScript: это's не так сложно; вы просто должны взломать прототип
'ы метод элементов HTML (до добавление слушателей).
function reportIn(e){
var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
console.log(a)
}
HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;
HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
this.realAddEventListener(a,reportIn,c);
this.realAddEventListener(a,b,c);
if(!this.lastListenerInfo){ this.lastListenerInfo = new Array()};
this.lastListenerInfo.push({a : a, b : b , c : c});
};
Теперь каждый анкерный элемент (а
) будем иметь lastListenerInfo
собственность, который содержит всех своих слушателей. И это даже работает для удаления слушателей с анонимными функциями.
Использовать getEventListeners в Гугл Хром:
getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));
(Переписав ответ от этот вопрос, поскольку она'ы уместен.)
При отладке, если вы просто хотите, чтобы увидеть события, я рекомендую либо...
Если вы хотите использовать события в коде, и вы с помощью jQuery до версии 1.8 вы можете использовать:
$(selector).data("events")
чтобы получить события. Начиная с версии 1.8, используя .данных (на"событий", у) прекращен (см. этот билет Ошибка). Вы можете использовать:
$._data(element, "events")
Другой пример: записать все события нажатия на определенную ссылку на консоли:
var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);
(см.
рабочий пример)К сожалению, , используя $._data это не рекомендуется только для отладки, поскольку она представляет собой внутреннюю структуру jQuery и может измениться в будущих выпусках. К сожалению, я не знаю другого простого способа доступа к событиям.
1: `прототип.отмечают использует элемент.метод addEventListener (см. исходный код)
2: Вы можете переопределить элемент.метод addEventListener, чтобы помнить добавил слушателей (EventListenerList удобное свойство
был удален из предложения спецификаций DOM3). Запустить этот код перед каким-либо мероприятием прилагается:
(function() {
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(a,b,c) {
this._addEventListener(a,b,c);
if(!this.eventListenerList) this.eventListenerList = {};
if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
this.eventListenerList[a].push(b);
};
})();
Читать все события:
var clicks = someElement.eventListenerList.click;
if(clicks) clicks.forEach(function(f) {
alert("I listen to this function: "+f.toString());
});
И Дон'т забудьте переопределить элемент.метода removeeventlistener, чтобы удалить событие от элемента пользовательского.eventListenerList
.
3: элемент.свойстве onclick
здесь требуют особого ухода:
if(someElement.onclick)
alert("I also listen tho this: "+someElement.onclick.toString());
4: Дон'т забыть элемент.атрибут content функция onclick
: это две разные вещи:
someElement.onclick = someHandler; // IDL attribute
someElement.setAttribute("onclick","otherHandler(event)"); // content attribute
Так что вы должны справиться с этим тоже:
var click = someElement.getAttribute("onclick");
if(click) alert("I even listen to this: "+click);
Визуальная закладка событие (описанное в самый популярный ответ) ворует только пользовательские библиотеки обработчик кэша:
Это получается, что нет никакого стандартного метода, предоставляемые консорциумом W3C рекомендуемый DOM-интерфейс, чтобы выяснить, какое событие слушатели прикреплены к определенному элементу. Хотя это может показаться надзора поступило предложение включить свойство eventListenerList до уровня 3 спецификация дом, но был к сожалению, были удалены в более поздних проектов. Таким образом, мы вынуждены посмотрел на отдельные JavaScript-библиотек, которые обычно поддержания кэша вложенные события (так они позже могут быть удалены и выполнять другие полезные абстракции).
как таковой, для того, для визуального события показать события, это надо уметь анализировать информацию о событиях из библиотеки JavaScript.
Элемент наиважнейший может быть сомнительной (т. е. потому что есть дом особенности как живые коллекции, которые не могут быть закодированы в JS), но это дает eventListenerList поддерживают по умолчанию, и она работает в Chrome, Firefox и Opera (не'т работать в IE7).
Вы могли бы обернуть собственные методы DOM для управления прослушиватели событий, помещая это в верхней части в <головы>
:
<script>
(function(w){
var originalAdd = w.addEventListener;
w.addEventListener = function(){
// add your own stuff here to debug
return originalAdd.apply(this, arguments);
};
var originalRemove = w.removeEventListener;
w.removeEventListener = function(){
// add your own stuff here to debug
return originalRemove.apply(this, arguments);
};
})(window);
</script>
Ч/Т @les2
Если у вас есть Firebug, вы можете использовать console.dir(object or array)
для печати красивого дерева в журнале консоли любого скаляра, массива или объекта JavaScript.
Попробуйте:
console.dir(clickEvents);
или
console.dir(window);
Полностью рабочего раствора на основе ответить Яна Турон - ведет себя как `getEventListeners () из консоли:
(Есть маленький баг с дубликатами. Это вовсе'т сломать все равно.)
(function() {
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(a,b,c) {
if(c==undefined)
c=false;
this._addEventListener(a,b,c);
if(!this.eventListenerList)
this.eventListenerList = {};
if(!this.eventListenerList[a])
this.eventListenerList[a] = [];
//this.removeEventListener(a,b,c); // TODO - handle duplicates..
this.eventListenerList[a].push({listener:b,useCapture:c});
};
Element.prototype.getEventListeners = function(a){
if(!this.eventListenerList)
this.eventListenerList = {};
if(a==undefined)
return this.eventListenerList;
return this.eventListenerList[a];
};
Element.prototype.clearEventListeners = function(a){
if(!this.eventListenerList)
this.eventListenerList = {};
if(a==undefined){
for(var x in (this.getEventListeners())) this.clearEventListeners(x);
return;
}
var el = this.getEventListeners(a);
if(el==undefined)
return;
for(var i = el.length - 1; i >= 0; --i) {
var ev = el[i];
this.removeEventListener(a, ev.listener, ev.useCapture);
}
};
Element.prototype._removeEventListener = Element.prototype.removeEventListener;
Element.prototype.removeEventListener = function(a,b,c) {
if(c==undefined)
c=false;
this._removeEventListener(a,b,c);
if(!this.eventListenerList)
this.eventListenerList = {};
if(!this.eventListenerList[a])
this.eventListenerList[a] = [];
// Find the event in the list
for(var i=0;i<this.eventListenerList[a].length;i++){
if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
this.eventListenerList[a].splice(i, 1);
break;
}
}
if(this.eventListenerList[a].length==0)
delete this.eventListenerList[a];
};
})();
Использование:
someElement.getEventListeners([имя])
- возвращает список слушателей события, если имя задано вернуть массив слушателей к этому событию
someElement.clearEventListeners([имя])
- удалить все прослушиватели событий, если название имеет значение только удалить слушателей к этому событию
Опера 12 (не последний хром webkit в основе двигателя) Стрекоза уже было на это время и, очевидно, отображается в структуре DOM. На мой взгляд это улучшенный отладчик и это единственная причина, оставшиеся, почему я до сих пор использую оперу 12 версии (нет версии V13 версии v14 и V15 по webkit на основе Стрекоза еще не хватает)
Я недавно работал с событиями и хотела посмотреть/контроль всех событий на странице. Посмотрев на возможные решения, я'ве решили пойти своим путем и создать собственную систему для мониторинга событий. Итак, я сделал три вещи.
Во-первых, мне нужен контейнер для всех слушателей событий на странице:, что'объект ы'EventListeners. Он имеет три полезных метода:
добавить(),
удалить(), и
Get()`.
Далее, я создал для EventListener
объекта, содержащего необходимую информацию для события, т. е.: цель
, тип
, обратный звонок
, параметры
, usecapture присвоено
, wantsUntrusted
, и добавил метод удалить ()`, чтобы удалить слушателя.
Наконец, я протянул метода addEventListener родной ()
и метода removeeventlistener () методы, чтобы заставить их работать с объектами, Я'вэ, созданных (
для EventListenerи
самое eventlisteners`).
Использование:
var bodyClickEvent = document.body.addEventListener("click", function () {
console.log("body click");
});
// bodyClickEvent.remove();
метода addEventListener()
создает для EventListener
объект, добавляет его в самое eventlisteners и возвращает для EventListener
объект, поэтому он может быть удален позже.
`Самое eventlisteners.получить () может использоваться, чтобы смотреть на слушателей в разделе. Он принимает себя eventtarget из или строку (тип события).
// EventListeners.get(document.body);
// EventListeners.get("click");
<ч>
Демо
Позвольте'ы сказать, что мы хотим знать каждый слушатель событий на этом текущая страница. Мы можем сделать это (предполагая, что вы're с помощью диспетчера расширений скрипт, вы в данном случае). Следующий скрипт делает это:
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @include https://stackoverflow.com/*
// @grant none
// ==/UserScript==
(function() {
fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
.then(function (response) {
return response.text();
})
.then(function (text) {
eval(text);
window.EventListeners = EventListeners;
});
})(window);
И когда мы Список всех слушателей, он говорит, что есть 299 прослушивателей событий. Там-то "кажется", чтобы быть некоторые повторы, но я не'т знать, если они'вновь действительно дублирует. Не каждый тип события дублируются, так что все те, что "дубликатов" и может быть слушателем.
Код можно найти на моем репозитория. я не'т хотите, чтобы разместить его здесь, потому что это'ы довольно долго.
<ч>
Обновление: это не'т, кажется, чтобы работать с jQuery. Когда я рассматриваю для EventListener, я вижу, что обратного вызова
function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}
Я считаю, что это относится к jQuery, а не фактического вызова. в jQuery хранит фактический обратного свойства eventtarget из:
$(document.body).click(function () {
console.log("jquery click");
});
Чтобы удалить прослушиватель событий, фактического обратного вызова должен быть передан метода removeeventlistener()
метод. Поэтому для того, чтобы сделать эту работу с jQuery, это требует дальнейшей модификации. Я мог бы исправить это в будущем.
Прототип 1.7.1 путь
function get_element_registry(element) {
var cache = Event.cache;
if(element === window) return 0;
if(typeof element._prototypeUID === 'undefined') {
element._prototypeUID = Element.Storage.UID++;
}
var uid = element._prototypeUID;
if(!cache[uid]) cache[uid] = {element: element};
return cache[uid];
}
Я пытаюсь сделать это в jQuery 2.1, и с "в$().нажмите кнопку() -> $(элемент).данных (на"события" - а).нажмите кнопку; в
" метод, это вовсе't работа.
Я понял, что только $._data() функции в моем случае :
в
$(document).ready(function(){
var node = $('body');
// Bind 3 events to body click
node.click(function(e) { alert('hello'); })
.click(function(e) { alert('bye'); })
.click(fun_1);
// Inspect the events of body
var events = $._data(node[0], "events").click;
var ev1 = events[0].handler // -> function(e) { alert('hello')
var ev2 = events[1].handler // -> function(e) { alert('bye')
var ev3 = events[2].handler // -> function fun_1()
$('body')
.append('<p> Event1 = ' + eval(ev1).toString() + '</p>')
.append('<p> Event2 = ' + eval(ev2).toString() + '</p>')
.append('<p> Event3 = ' + eval(ev3).toString() + '</p>');
});
function fun_1() {
var txt = 'text del missatge';
alert(txt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>
в
изменение этих функций позволит вам войти слушателей, добавил:
EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent
прочитать остальную часть слушателей
console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));