Пузырьки событий и захват событий
Как разработчику JavaScript очень важно понимать событие и то, как его обработчик работает под капотом. Итак, сегодня я собираюсь поговорить о всплытии событий и захвате событий в JavaScript.
Как работает событие?
Прежде чем начать, давайте посмотрим, как устроена ваша DOM в браузере.
Здесь, как мы видим, окно является корневым элементом нашей страницы просмотра. Ниже у нас есть дерево наших документов, а после html - тело и т. Д. Итак, это основное общее дерево нашей страницы.
Теперь предположим, что вы нажали кнопку One на странице. Для этого щелчка будет срабатывать один щелчок из javascript, и это событие перейдет к этому элементу через путь окна и всех их родительских элементов, как мы можем видеть на изображении.
И когда он находит этот элемент в дереве, он ищет и обработчик событий, и если он там есть, запускает этот обработчик, а затем возвращается к корневому элементу.
Когда событие доходит до элемента, оно называется захват события, а когда оно переходит в корень после обработки события, называется всплытие события.
Теперь предположим, что у нас есть обработчик событий вроде
event.addEventListner('click' , callback , true)
Последний аргумент для
Верно: событие захвата в цикле захвата событий.
False: захват события в цикле пузыря событий события.
Если мы слушаем этот элемент, тогда нормально фиксировать событие в любом цикле. Но предположим, что если вы слушаете это событие родительского элемента, тогда это событие проверит все элементы этой части и найдет конкретный элемент для этого даже и запустит обратный вызов для этого элемента и события.
Распространение событий
Когда это событие движется по пути, этим процессом является распространение события. Вы можете остановить распространение, если хотите, с помощью event.stopPropagation.
Предположим, у вас есть такая структура ссылок
div p ul li a
Итак, предположим, вы нажали на «а» и у вас есть эта функция.
var ul = document.querySelector(‘ul’); ul.addEventListener(‘click’ , doSomething , true); function doSomething(event) { event.stopPropagation(); }
Этот вид функции может быть полезен во многих процессах JavaScript, таких как параллакс-анимация и другие вещи.
ДО СВИДАНИЯ !!!
Надеюсь, вы узнаете что-то новое из этого блога, и надеюсь, что это поможет вам в будущем или в любое время :). Итак, если вы найдете это полезным, поделитесь этим. Счастливого обучения
«Поделитесь своими знаниями. Это способ обрести бессмертие ».
автор Далай-лама XIV