У меня есть страница, где некоторые слушатели событий прикреплены к полям ввода и полям выбора. Есть ли способ узнать, какие слушатели событий наблюдают за конкретным узлом DOM и для какого события?

События прикрепляются с использованием:

  1. Prototype's Event.observe;
  2. DOM's addEventListener;
  3. В качестве атрибута элемента element.onclick.
894
Navneet 15 Янв 2009 в 17:19

14 ответов

Лучший ответ

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

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

502
Legends 8 Мар 2020 в 15:38

Инструменты разработчика Firefox теперь делают это. События отображаются при нажатии кнопки «ev» справа от каждого элемента, включая jQuery и DOM.

Screenshot of Firefox developer tools' event listener button in the inspector tab

18
Peter Mortensen 29 Сен 2016 в 17:43

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

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

Читать остальных слушателей с

console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));
1
Aiden Waterman 18 Апр 2019 в 14:57

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

Пытаться:

console.dir(clickEvents);

Или

console.dir(window);
12
Peter Mortensen 29 Сен 2016 в 17:41

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

23
Jon z 6 Ноя 2015 в 17:49

Используйте getEventListeners в Google Chrome :

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));
52
Carles Alcolea 3 Апр 2018 в 23:32

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

enter image description here

8
Daniel Sokolowski 28 Ноя 2013 в 16:30

Прототип 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];
}
4
Ronald 17 Янв 2013 в 17:28

Существует замечательное расширение jQuery Events :

введите описание изображения здесь (тема источник)

3
Community 23 Май 2017 в 12:34

Я пытаюсь сделать это в 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>
3
Joel Barba 19 Май 2015 в 09:00

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

9
Community 23 Май 2017 в 12:26

Chrome, Firefox, Vivaldi и Safari поддерживают getEventListeners(domElement) в консоли инструментов разработчика.

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

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

328
Pietro Nadalini 17 Окт 2019 в 18:14

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

88
Ishan 17 Янв 2011 в 07:39

Можно перечислить всех слушателей событий в 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, которое содержит всех своих слушателей. И это даже работает для удаления слушателей с анонимными функциями.

70
alex 30 Июл 2012 в 00:11