Возможно ли отслеживать прослушиватели событий в элементе HTML, чтобы знать, когда один из них удаляется?

#javascript #html #event-listener #removeeventlistener

#javascript #HTML #прослушиватель событий #removeeventlistener

Вопрос:

У меня проблема на странице с событием, которое не запускается при определенных обстоятельствах. Это не мой код, и я пытаюсь отладить уменьшенный и скрытый код JavaScript, и я схожу с ума.

При ответе на комментарий на нашем веб-сайте, если текст ответа пуст, это событие (событие аналитики для регистрации того, что пользователь нажал кнопку ответа) запускается. Если есть текст, событие не запускается.

Элемент является <span> тегом, но прослушиватель событий фактически прикреплен к <body> тегу. Моя текущая теория заключается в том, что некоторый код, который выполняется, когда в ответе действительно есть текст, удаляет этот прослушиватель событий, и поэтому он не запускается.

Итак, есть ли способ отслеживать прослушиватели событий в <body> , чтобы узнать, когда (и где в коде) этот прослушиватель событий удаляется?

Обновление Мы обнаружили проблему. Сторонняя библиотека, которую мы используем для комментариев, удаляет родительский элемент кнопки, и это делает невозможным распространение события в тело.

Ответ №1:

Если вы можете запустить код сценария до удаления обработчика событий, вы можете заменить removeEventListener on document.body своей собственной функцией:

 const original = document.body.removeEventListener;
document.body.removeEventListener = function(...args) {
  console.log("Removed");
  return original.apply(this, args);
};

function handler() {
  console.log("Clicked");
}
document.body.addEventListener("click", handler);
document.body.removeEventListener("click", handler);

(Чтобы покрыть ваши базы, вы также можете преобразовать onclick (или что-то еще, что используется) в средство доступа, чтобы вы могли захватить его, если это сделает код document.body.onclick = null; )

Существуют другие способы добавления и удаления обработчика, но, надеюсь, любая библиотека, которую вы используете, использует стандарт.

Примечание: Чтобы подтвердить свою теорию об удалении обработчика, вы можете проверить обработчики элемента в devtools Chrome: щелкните правой кнопкой мыши на странице и выберите «Проверить элемент», перейдите к body и посмотрите на вкладку «Прослушиватели событий».

1. И вы можете throw new Error() внутри обработчика получить трассировку стека, которая может помочь точно определить местоположение кода, который удаляет прослушиватель, если это полезно

2. Спасибо, @T.J.Crowder, это было очень полезно. Я обнаружил, что действительно удаляется прослушиватель событий, но не тот, о котором я беспокоюсь. Нужно продолжать искать, но спасибо вам за это!

Ответ №2:

Я думаю, вы также можете использовать инструменты Google для разработчиков, которые вы можете открыть с помощью кнопки в правом верхнем углу окна. В разделе исходного кода вы можете увидеть все прослушиватели событий