Wat is 'hoisting' in de context van JavaScript?

Это механизм, при котором, когда на элементе происходит событие, обработчик сначала срабатывает на самом элементе, затем на его родителе, потом на родителе родителя и так далее, вверх по DOM-дереву.

Представьте, что у вас есть вложенные друг в друга элементы: <div> внутри него <p>, внутри <p> находится <span>. Если вы кликнете по <span>, то первым сработает обработчик клика на <span>, затем на <p>, а потом на <div>.

// Пример всплытия событий
const div = document.querySelector('div');
const p = document.querySelector('p');
const span = document.querySelector('span');

div.addEventListener('click', function() {
  console.log('Клик на div');
});

p.addEventListener('click', function() {
  console.log('Клик на p');
});

span.addEventListener('click', function() {
  console.log('Клик на span'); // Сработает первым
});

Это поведение полезно для реализации делегирования событий, когда один обработчик устанавливается на родительском элементе для обработки событий от всех его потомков.

// Пример использования всплытия для делегирования событий
const ul = document.querySelector('ul');

ul.addEventListener('click', function(event) {
  // Проверяем, является ли целевой элемент listItem
  if (event.target.tagName === 'LI') {
    console.log('Кликнули по элементу списка:', event.target.textContent);
  }
});

Всплытие можно остановить с помощью метода stopPropagation() объекта события.

// Пример остановки всплытия
const button = document.querySelector('button');
const container = document.querySelector('.container');

container.addEventListener('click', function() {
  console.log('Клик на контейнер');
});

button.addEventListener('click', function(event) {
  console.log('Клик на кнопку');
  event.stopPropagation(); // Останавливаем всплытие дальше
});