🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Поймите, почему один клик запускает несколько функций
Если функция обработки клика назначена кнопке и окружающим её элементам, одно нажатие запустит их по очереди. Так работает всплытие события: оно поднимается от нажатой кнопки к её родителям по DOM-дереву, то есть структуре HTML-документа, вплоть до корневого элемента.
Соберите страницу, где кнопка button вложена в span, а тот — в div. Назначьте функции для button, span, div и body: пусть каждая выводит имя элемента в консоль браузера. Нажмите кнопку и увидите тот же порядок. Затем нажмите span: кнопка промолчит, потому что событие идёт к родителям, а не к дочерним элементам.
Разбор на freeCodeCamp.org с иллюстрациями поможет повторить пример. После него поменяйте вложенность элементов и предскажите порядок до клика: так всплытие превратится из термина в понятное поведение.