Например, если я запускаю следующий код в браузере и записываю производительность, после 10 нажатий Chrome Dev Tools отображает 21 слушателя (см. Скриншот ниже), даже если каждый слушатель теоретически удаляется перед добавлением другого.
А почему после 10 кликов 21 слушатель? Это говорит о том, что при загрузке страницы был один прослушиватель (правильно) и что при каждом щелчке добавляется 2 прослушивателя, хотя я использую e.stopPropagation (). Почему это так?
Меня интересует, как обнаружить утечки памяти в моем коде, если я добавляю и удаляю множество элементов и прослушивателей событий в веб-приложении.
<div id="container"></div>
<script>
function addListener(){
let container = document.getElementById("container");
container.addEventListener("click", clickHandler, false);
}
function clickHandler(e){
e.stopPropagation();
let container = document.getElementById("container");
container.removeEventListener("click", clickHandler, false);
console.log("clicked");
addListener();
}
addListener();
</script>
