Здравствуйте!
Я сейчас изучаю обработчики событий. А конкретно в данном случае, удаление обработчика событий. Есть три кнопки, одна из которых добавляет обработчик, вторая убирает. А третья это демонстрирует.
html часть:
<body>
<div class="container">
<button class="btn" data-action="add">Add Listener</button>
<button class="btn" data-action="remove">Remove Listener</button></div>
<hr>
<button id="btn" class="btn">CLICK ME!</button>
<script src="./js/js.js"></script>
</body>
js часть (тут код с моими комментариями):
(1) // получаем в переменные объекты по конкретному значению атрибута:
const addBtn = document.querySelector('button[data-action="add"]');
const removeBtn = document.querySelector('button[data-action="remove"]');
const btn = document.querySelector("#btn");
(2) // создаем функцию обработчик:
const handleClick = () => {alert("CLICK EVENT LISTENER ALERT!");};
(3) // назначаем обработчик для переменой addBtn по событию click...
addBtn.addEventListener("click", () => {
btn.addEventListener("click", handleClick);
});
removeBtn.addEventListener("click", () => {
btn.removeEventListener("click", handleClick);
});
Вопрос: Что происходит в третьей части кода? Назначается обработчик для переменной addBtn по событию click. Вторым параметром метода addEventListener, handler, выступает целая стрелочная функция без аргументов... которая выполняет то-же самое что и внешняя для функции handleClick...
Я за день мозг сломал. Объясните пожалуйста поподробнее что происходит в части (3).