33 Всплытие и погружение, делегирование событий в JS, todolist часть 4

В этом уроке мы продолжаем изучать JavaScript и продолжаем работу над нашим проектом **Todo List**. На прошлом уроке мы добавили отображение задач, количество незавершённых задач, состояние пустого списка, чекбоксы, а также кнопки редактирования и удаления. Но теперь перед нами появляется важный вопрос: как правильно обрабатывать события для всех этих элементов? Вместо того чтобы добавлять отдельный обработчик события на каждый чекбокс и каждую кнопку, мы разберём механизм *всплытия событий (Event Bubbling)* и узнаем, как с его помощью работает **делегирование событий (Event Delegation)**. В этом уроке вы узнаете: что такое всплытие событий в JavaScript; как событие проходит от дочернего элемента к его родителям; почему клик по `checkbox` может вызвать обработчик на `label` и `ul`; какие события всплывают, а какие — нет; что такое `event.target`; что такое делегирование событий; почему один обработчик на родительском элементе может быть удобнее множества обработчиков; как использовать `closest()` для поиска нужного элемента; как получить `id` задачи через `data-*` атрибут; как реализовать обработку клика по Todo List через один обработчик; что делает `stopPropagation()`; что такое *Capturing (перехват)* и чем он отличается от Bubbling. В практической части мы изменим наш Todo List и реализуем обработку изменения состояния задачи через **делегирование событий**. В результате вместо обработчиков на каждом отдельном элементе мы сможем повесить один обработчик на `ul` и определить, по какому элементу пользователь кликнул. 📌 *Исходный код проекта и материалы урока:* https://github.com/niskadevla/js-cour... 📚 *Материалы, которые использовались при подготовке:* https://learn.javascript.ru/bubbling-... https://learn.javascript.ru/event-del... Если вы изучаете JavaScript с нуля — подписывайтесь на канал и продолжайте обучение вместе со мной. *JavaScript для начинающих — Просто. Понятно. С нуля.*