Як знайти слухачів подій на вузлі DOM при налагодженні або з коду JavaScript?

У мене є сторінка, де деякі слухачі подій приєднуються до полів введення та вибирають поля. Чи є спосіб дізнатися, які слухачі подій спостерігають за певним вузлом DOM та за якою подією?

Події додаються за допомогою:

1. Прототипи Event.observe ;
2. DOM addEventListener;
3. Як атрибут елемента element.onclick.

Якщо вам просто потрібно перевірити, що відбувається на сторінці, ви можете спробувати закладку 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

  // inspect
  var clickEvents = $(element).data("events").click;
  jQuery.each(clickEvents, function(key, value) {
      alert(value) // alerts "function() { alert('clicked!') }"
  })

• 1.4.x (зберігає обробник всередині об'єкта)

  // inspect
  var clickEvents = $(element).data("events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
      alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
      // also available: handlerObj.type, handlerObj.namespace
  })

^{(Див. jQuery.fn.dataІ jQuery.data)}

Спосіб D): прототип (безладний)

$(element).observe('click', handler);

• 1.5.x

  // inspect
  Event.observers.each(function(item) {
      if(item[0] == element) {
          alert(item[2]) // alerts "function() { alert('clicked!') }"
      }
  })

• 1.6 до 1.6.0.3, включно (тут дуже важко)

  // inspect. "_eventId" is for < 1.6.0.3 while 
  // "_prototypeEventID" was introduced in 1.6.0.3
  var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
  clickEvents.each(function(wrapper){
      alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
  })

• 1.6.1 (трохи краще)

  // inspect
  var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
  clickEvents.each(function(wrapper){
      alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
  })

Підтримка Chrome, Firefox, Vivaldi та Safari getEventListeners(domElement)на консолі Інструментів для розробників.

Для більшості налагоджувальних цілей це можна використовувати.

Нижче наведено дуже гарне посилання на його використання: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

WebKit Inspector в браузерах Chrome або Safari зараз робить це. Він буде відображати слухачів подій для елемента DOM, коли ви вибираєте його в області елементів.

Можна перелічити всіх слухачів подій у JavaScript: Це не так складно; Вам просто потрібно зламати prototypeметод елементів 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});
};

Тепер кожен елемент прив'язки ( a) матиме lastListenerInfoвластивість, яка містить усіх його слухачів. І це навіть працює для видалення слухачів з анонімними функціями.

Використовуйте getEventListeners в Google Chrome :

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));

(Переписування відповіді з цього питання, оскільки воно тут актуальне.)

Під час налагодження, якщо ви просто хочете переглянути події, я рекомендую або ...

1. Візуальна подія
2. Розділ " Елементи " в Інструментах для розробників Chrome: виберіть елемент і знайдіть "Слухачі подій" в нижньому правому куті (подібне в Firefox)

Якщо ви хочете використовувати події у своєму коді, а ви використовуєте jQuery до версії 1.8 , ви можете використовувати:

$(selector).data("events")

щоб отримати події. З версії 1.8 використання .data ("події") припинено (див. Цей квиток на помилку ). Ви можете використовувати:

$._data(element, "events")

Інший приклад: запишіть усі події клацання на певному посиланні на консоль:

var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);

(див. http://jsfiddle.net/HmsQC/ для робочого прикладу)

На жаль, використання даних $ ._ це не рекомендується, за винятком налагодження, оскільки це внутрішня структура jQuery і може змінитись у майбутніх випусках. На жаль, я не знаю жодного іншого легкого способу доступу до подій.

1: Prototype.observeвикористовує Element.addEventListener (див . Вихідний код )

2: Ви можете замінити, Element.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());
});

І не забудьте змінити, Element.removeEventListenerщоб видалити подію зі звичаю Element.eventListenerList.

3: Element.onclickмайно потребує особливого догляду тут:

if(someElement.onclick)
  alert("I also listen tho this: "+someElement.onclick.toString());

4: не забудьте Element.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);

Закладка Visual Event (згадана у найпопулярнішій відповіді) викрадає лише кеш користувальницької бібліотеки:

Виявляється, не існує стандартного методу, що надається рекомендованим W3C інтерфейсом DOM, щоб з’ясувати, які слухачі подій приєднані до певного елемента. Хоча це може здатися недоглядом, була пропозиція включити властивість під назвою eventListenerList до специфікації DOM рівня 3, але, на жаль, було видалено в наступних проектах. Як таких ми змушені розглядати окремі бібліотеки Javascript, які зазвичай підтримують кеш доданих подій (щоб потім їх можна було видалити та виконати інші корисні абстракції).

Таким чином, для того, щоб Visual Event відображав події, він повинен мати можливість аналізувати інформацію про подію з бібліотеки Javascript.

Перевизначення елементів може бути сумнівним (тобто тому, що є деякі особливості DOM, такі як живі колекції, які неможливо кодувати в JS), але він дає підтримку eventListenerList спочатку і працює в Chrome, Firefox та Opera (не працює в IE7 ).

Ви можете обернути рідні методи DOM для управління слухачами подій, поставивши це у верхній частині свого <head>:

<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>

H / T @ les2

Інструменти для розробників Firefox зараз це роблять. Події відображаються натисканням кнопки "ev" праворуч на екрані кожного елемента, включаючи події jQuery та DOM .

Якщо у вас є 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([name]) - список повернень слухачів подій, якщо ім'ям встановлено масив повернення слухачів для цієї події

someElement.clearEventListeners([name]) - видалити всіх слухачів подій, якщо ім'я встановлено лише видалити слухачів для цієї події

Opera 12 (не найновіший движок Chrome Webkit) Dragonfly мав це протягом певного часу і очевидно відображається в структурі DOM На мою думку, це вищий налагоджувач і є єдиною причиною, чому я все ще використовую версію на базі Opera 12 (немає версії v13, v14, а в V15 Webkit на базі ще немає Dragonfly)

Прототип 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];
}

Я нещодавно працював з подіями і хотів переглянути / контролювати всі події на сторінці. Переглянувши можливі рішення, я вирішив піти власним шляхом і створити власну систему для моніторингу подій. Отже, я зробив три речі.

По-перше, мені знадобився контейнер для всіх слухачів подій на сторінці: це EventListenersоб’єкт. Вона складається з трьох корисних методів: add(), remove(), і get().

Потім я створив EventListenerоб'єкт для зберігання необхідної інформації для події, тобто target, type, callback, options, useCapture,wantsUntrusted , і додав метод remove()для видалення слухача.

Нарешті, я розширив нативні addEventListener()і removeEventListener()методи, щоб змусити їх працювати з створеними мною об'єктами ( EventListenerіEventListeners ) .

Використання:

var bodyClickEvent = document.body.addEventListener("click", function () {
    console.log("body click");
});

// bodyClickEvent.remove();

addEventListener()створює EventListenerоб’єкт, додає його EventListenersі повертає EventListenerоб'єкт, щоб його можна було потім видалити.

EventListeners.get()можна використовувати для перегляду слухачів на сторінці. Він приймає EventTargetабо рядок (тип події).

// EventListeners.get(document.body);
// EventListeners.get("click");

Демо

Скажімо, ми хочемо знати кожного слухача події на цій поточній сторінці. Ми можемо це зробити (припустимо, що ви використовуєте розширення менеджера сценаріїв, у цьому випадку Tampermonkey). Наступний сценарій робить це:

// ==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, вона потребує подальшої модифікації. Я можу це виправити в майбутньому.

Я намагаюся зробити це в jQuery 2.1 та з "$().click() -> $(element).data("events").click; методом " це не працює.

Я зрозумів, що в моєму випадку працює лише функція $ ._ 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>

Існує приємне розширення jQuery Events :

( джерело теми )

зміна цих функцій дозволить вам записати доданих слухачів:

EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent

читати решту слухачів с

console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));