Как просмотреть событие, назначенное с помощью addEventListener
Я хотел бы просмотреть событие, зарегистрированное с помощью element.addEventListener. Как это сделать?
Желательно без полифиллов и обёрток.
Ответы (2 шт):
В devtools, выберите элемент, рядом со вкладкой стили есть вкладка Event Listeners, там вы можете увидеть все слушатели, которые вы добавили на элемент.
Если я правильно понял подоплеку вопроса, речь о том чтобы получить эти сведения через JS а не devtools. Плохая новость в том что это не возможно.
document.querySelector('#test2')
.addEventListener('click', () => {
console.log('test2')
}, false)
document.querySelector('#output1').innerText = document.querySelector('#test1').onclick
document.querySelector('#output2').innerText = document.querySelector('#test2').click<button id="test1" onclick="console.log('test1')">test1</button>
<pre id="output1"></pre>
<button id="test2">test2</button>
<pre id="output2"></pre>Есть конечно обходной вариант - сделать обертку над addEventListener на все элементы например через querySelectorAll('*') до того как отработают другие скрипты, это может подойти для тестирования своего кода, но вряд ли подойдет в других случаях. А иным способом сделать это не возможно, так как там нативный код.
// сохраняем оригинальную функцию
const old = document.querySelector('#test3').addEventListener
document.querySelector('#test3').addEventListener = function(){
console.log(arguments[1])
old.apply(this, arguments) // вызываем оригинальную функцию
}
document.querySelector('#test3')
.addEventListener('click', () => {
console.log('test3')
}, false)
document.querySelector('#output3').innerText = document.querySelector('#test3').click<button id="test3">test3</button>
<pre id="output3"></pre>И третий самый героический путь, смотреть исходники devtools как это там реализованно и писать свое расширение которое будет взаимодействовать со страницей или еще как-то выводить информацию о событиях.