Как найти слушателей событий на узле DOM при отладке или из кода JavaScript?

Это зависит от того, как привязаны события. Для иллюстрации предположим, что у нас есть следующий обработчик кликов:

var handler = function() { alert('clicked!') };

Мы собираемся прикрепить его к нашему элементу, используя разные методы, некоторые из которых позволяют проверку, а некоторые - нет.

Метод A) обработчик одиночного события

element.onclick = handler;
// inspect
console.info(element.onclick); // "function() { alert('clicked!') }"

Метод б) несколько обработчиков событий

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) {
       console.info(value) // "function() { alert('clicked!') }"
   })
  

• 1.4.x (хранит обработчик внутри объекта)

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

• 1.7+ (очень красиво)

  Сделано с использованием знаний от этот комментарий.

   events = $._data(this, 'events');
   for (type in events) {
     events[type].forEach(function (event) {
       console.info(event['handler']);
     });
   }
  

^{(See jQuery.fn.data and jQuery.data)}

Метод D): прототип (беспорядочный)

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

• 1.5.x

   // inspect
   Event.observers.each(function(item) {
       if (item[0] == element) {
           console.info(item[2]) // "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){
       console.info(wrapper.handler) // "function() { alert('clicked!') }"
   })
  

• 1.6.1 (немного лучше)

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

При щелчке по результирующему выводу в консоли (которая показывает текст функции) консоль перейдет непосредственно к строке объявления функции в соответствующем файле JS.

Если у вас есть Firebug, вы можете использовать console.dir(object or array) для печати красивого дерева в журнале консоли любого скаляра, массива или объекта JavaScript.

Пытаться:

console.dir(clickEvents);

или же

console.dir(window);

Если вам просто нужно проверить, что происходит на странице, вы можете попробовать букмарклет Визуальное событие.

Обновлять: Визуальное событие 2 доступен.

WebKit Inspector в браузерах Chrome или Safari теперь делает это. Он отобразит прослушиватели событий для элемента DOM, когда вы выберете его на панели «Элементы».

Можно перечислить всех слушателей событий в JavaScript: это не так уж сложно; вам просто нужно взломать метод prototype элементов HTML (перед добавляет слушателей).

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
    console.info(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, которое содержит всех его слушателей. И это даже работает для удаления слушателей с анонимными функциями.

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

При отладке, если вы просто хотите увидеть события, я рекомендую либо ...

1. Визуальное событие
2. Раздел Элементы инструментов разработчика Chrome: выберите элемент и найдите «Слушатели событий» в правом нижнем углу (аналогично Firefox).

Если вы хотите использовать события в своем коде и используете jQuery до версии 1.8, вы можете использовать:

$(selector).data("events")

получить события. Начиная с версии 1.8 использование .data ("событий") больше не поддерживается. (см. этот билет об ошибке). Ты можешь использовать:

$._data(element, "events")

Другой пример: записывать все события кликов по определенной ссылке в консоль:

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

(см. рабочий пример http://jsfiddle.net/HmsQC/)

К сожалению, с использованием данных $ ._ это не рекомендуется, за исключением отладки, поскольку это внутренняя структура 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];
}

Chrome, Firefox, Vivaldi и Safari поддерживают getEventListeners(domElement) в своей консоли Developer Tools.

Это можно использовать для большинства целей отладки.

Ниже приведена очень хорошая рекомендация по его использованию: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

Opera 12 (не последняя версия движка Chrome Webkit). Стрекоза имеет это некоторое время и, очевидно, отображается в структуре DOM. На мой взгляд, это превосходный отладчик, и это единственная оставшаяся причина, по которой я все еще использую версию на основе Opera 12 (нет версии v13, v14, а в версии v15 Webkit все еще отсутствует Dragonfly)

Используйте getEventListeners в Гугл Хром:

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

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 (упомянутый в самом популярном ответе) только крадет кеш обработчика пользовательской библиотеки:

It turns out that there is no standard method provided by the W3C recommended DOM interface to find out what event listeners are attached to a particular element. While this may appear to be an oversight, there was a proposal to include a property called eventListenerList to the level 3 DOM specification, but was unfortunately been removed in later drafts. As such we are forced to looked at the individual Javascript libraries, which typically maintain a cache of attached events (so they can later be removed and perform other useful abstractions).

As such, in order for Visual Event to show events, it must be able to parse the event information out of a Javascript library.

Переопределение элемента может быть сомнительным (например, потому что есть некоторые специфические функции DOM, такие как живые коллекции, которые нельзя закодировать в JS), но он дает поддержку eventListenerList изначально и работает в Chrome, Firefox и Opera (не работает в IE7. ).

Инструменты разработчика Firefox теперь делают это. События отображаются при нажатии кнопки «ev» справа от дисплея каждого элемента, включая события 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>

Полностью рабочее решение на основе ответ Яна Турона - ведет себя как 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]) - удалить всех слушателей событий, если задано имя, удалить слушателей только для этого события

Вы можете обернуть собственные методы 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

Есть симпатичный Расширение jQuery Events:

(тема источник)

Недавно я работал с событиями и хотел просматривать / контролировать все события на странице. Посмотрев на возможные решения, я решил пойти своим путем и создать собственную систему мониторинга событий. Итак, я сделал три вещи.

Во-первых, мне нужен был контейнер для всех слушателей событий на странице: это объект EventListeners. У него есть три полезных метода: add(), remove() и get().

Затем я создал объект EventListener для хранения необходимой информации для события, а именно: target, type, callback, options, useCapture, wantsUntrusted, и добавил метод remove() для удаления слушателя.

Наконец, я расширил собственные методы addEventListener() и removeEventListener(), чтобы они работали с объектами, которые я создал (EventListener и EventListeners).

Применение:

var bodyClickEvent = document.body.addEventListener("click", function () {
    console.info("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.info("jquery click");
});

Чтобы удалить прослушиватель событий, необходимо передать обратный вызов методу removeEventListener(). Поэтому для того, чтобы эта функция работала с jQuery, требуется дальнейшая модификация. Я могу исправить это в будущем.

изменение этих функций позволит вам регистрировать добавленных слушателей:

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

прочтите остальных слушателей с

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

Чтобы все прослушиватели событий на странице распечатывались вместе с их элементами

Array.from(document.querySelectorAll("*")).forEach(e => {
    const ev = getEventListeners(e)
    if (Object.keys(ev).length !== 0) console.info(e, ev)
})