Что такое распространение событий? Распространение событий определяет, в каком порядке элементы получают событие.
Я знаю, что большинство из вас ничего не понимает из этого определения Распространения Событий. Но нет проблем, мы разберем это на примерах. Забудьте о распространении событий сейчас.
Теперь мы узнаем, что такое пузырьковое воспроизведение событий? Когда у нас есть родительский и дочерний элементы в коде, и все они активируются для события, то, если вы инициируете дочернее событие, родительское событие запускается автоматически. Допустим, у нас есть родитель div и дочерний элемент div. У них обоих есть событие click. Теперь, если вы нажмете на дочерний div, родительский div щелкнет автоматически.
Вы будете более ясны в этой концепции с примерами. Мы создадим три элемента div с идентификатором в файле HTML и запишем события щелчка в файле javascript.
Теперь создайте файлы HTML и js.
Теперь запустите в браузере. Вывод будет таким.
Настоящее волшебство начинается сейчас. Нажмите на предложение Click child и проверьте консоль. Попробуй тут понять, ты просто нажимаешь на Click child, а Click father и Click grandfather тоже печатаются в консоли. Если вы снова посмотрите на консоль, вы увидите иерархию от дочернего к родительскому.
Это Event Bubbling в javascript. Теперь, если вы нажмете на предложение Click on father, что должно произойти?
да. ты прав. печатаются click on father, затем click on grandfather.
Запись событий. Теперь посмотрите на файл event.js. Просто добавьте один логический элемент true во все события.
Теперь нажмите на предложение click child. Вы получаете результат, противоположный предыдущему выводу.
Event capturing поддерживает иерархию от родителя к дочернему элементу.
Теперь у вас возникает вопрос, а что, если вы изменили все значения true на false? Затем он ведет себя как всплывающее событие. Вы можете попробовать это.
Что, если я изменю значение true на false? Подумайте, какой может быть выход?
Какие значения равны true, они ведут себя как event capturing, а какие значения false ведут себя как event bubbling.
Теперь, как остановить этот цикл событий. Вы можете использовать e.stopPropagation(). Если вы используете это в первом событии, таком как дочернее событие для event bubbling и родительское событие для event capturing, то запускается только первое событие.
Всплывание событий и захват событий являются распространением событий.
Первоначально опубликовано на https://sahedthought.hashnode.dev.
