29 Обработчик событий в JS, addEventListener, removeEventListener, рефакторинг калькулятора

В этом уроке продолжаем изучать события в JavaScript и разберём более гибкий способ работы с обработчиками — `addEventListener`. На прошлом уроке мы научились управлять стилями элементов из JavaScript, а ранее уже познакомились с событиями и обработчиками. Теперь разберём, чем `addEventListener` отличается от `onclick` и почему в реальных проектах он используется гораздо чаще. В этом уроке вы узнаете: 🔹 Что такое `addEventListener` 🔹 Как правильно добавлять обработчики событий 🔹 Чем `addEventListener` отличается от `onclick` 🔹 Как добавить несколько обработчиков на одно событие 🔹 Что такое `removeEventListener` и как удалить обработчик 🔹 Почему при удалении обработчика важно передавать ту же функцию 🔹 Что такое объект события `event` 🔹 Что такое `currentTarget` 🔹 Что такое третий параметр `options` 🔹 Как работает опция `{ once: true }` 🔹 Как использовать `querySelectorAll` для поиска нескольких элементов 🔹 Как применять `data-*` атрибуты и `dataset` 🔹 Как передавать данные из HTML в JavaScript Практика 🚀 В конце урока применим полученные знания на практике и **отрефакторим калькулятор**, который мы создавали ранее. Уберём лишнее дублирование, перестанем создавать отдельный `id` для каждой кнопки и сделаем обработку кнопок более удобной и масштабируемой. В результате разберём реальный пример того, как изученные возможности JavaScript помогают сделать код чище и удобнее. Домашнее задание 📝 Отрефакторить свой калькулятор, используя `addEventListener`, `querySelectorAll`, `data-*` атрибуты и `dataset`. Если вы изучаете JavaScript с нуля — подписывайтесь на канал и проходите уроки последовательно. *JavaScript для начинающих — Просто. Понятно. С нуля.*