Пузырьки событий и захват событий

Как разработчику 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