Как посмотреть, как обработчики событий добавляются в элемент?

Question

У меня есть ошибка, которая выглядит так, как будто она вызвана обработчиком события, прикрепленным к событию click:

 mxpnl.track_links("#pagebody a", "Click.body");

Я бы хотел посмотреть, как добавить обработчик события этого элемента (икогда)

Я нашел его в Chrome Debugger (Dev Tools)> Elements и выбрал Break on Attribute модификаций.Отладчик никогда не ломается.

Я также выбрал его Parent Div (внутри которого он находится) и установил Отладчик (щелчок правой кнопкой мыши на элементе)> break на модификациях поддерева.Опять же, это никогда не ломается.

Что я здесь не так делаю?

Answer 1

Проще говоря, если объяснение, то слушатели событий - это просто функция, которая добавляет массив с указанием строки, такой как «щелчок» и «вкл» и т. Д.

Итак, когда вы говорите .....

  function myClick1(){
  console.log('myclick1 called');
}  
 document.querySelector('mydiv').addEventListener('click', myClick1);
    function myClick2(){
          console.log('myclick2 called');
        }
document.querySelector('mydiv').addEventListener('click', myClick2);

это добавляет функции myClick1 и myClick2 в массив прослушивателей событий для щелчка и выполняет в порядке добавления.

И ВЫ МОЖЕТЕ ИСПОЛЬЗОВАТЬ ПРОТОТИП ЦЕЛИ СОБЫТИЙ, ЧТОБЫ ОБРАТИТЬСЯ К МАРШРУТУ Массив списка слушателей.

Answer 2

Добавление прослушивателя событий не является изменением атрибута (часто) - скорее, обычно это вызов addEventListener или on - назначения.Таким образом, прослушивание изменений атрибутов не будет работать.

Один из вариантов - monkeypatch addEventListener, чтобы debugger запускался при вызове addEventListener с совпадающими аргументами.Например:

// snippet might not actually enter the debugger due to embedded sandboxing issues

const nativeEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(...args) {
  if (this.matches('div') && args[0] === 'click') {
    console.log('listener is being added to a div');
    debugger;
  }
  nativeEventListener.apply(this, args);
}



// then, when an event listener is added, you'll be able to intercept the call and debug it:

document.querySelector('div').addEventListener('click', () => {
  console.log('clicked');
});

<div>click me</div>