7.1 Event Bubbling (Всплытие событий)
В JavaScript события, происходящие в одном элементе, могут распространяться по DOM-дереву. Этот процесс называется распространением событий и включает два основных механизма: всплытие событий (event bubbling) и перехват событий (event capturing).
Механизмы распространения событий:
- Event Bubbling (Всплытие событий).
- Event Capturing (Перехват событий).
Всплытие событий — это процесс, при котором событие, возникшее в дочернем элементе, последовательно распространяется вверх по цепочке родителей до корневого элемента (обычно document).
Объяснение:
- Когда кнопка
childнажата, сначала срабатывает обработчик события на элементеchild(Child clicked) - Затем событие всплывает к элементу
parent, и срабатывает его обработчик (Parent clicked)
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (Перехват событий)
Перехват событий — это процесс, при котором событие сначала распространяется от корневого элемента вниз по цепочке родителей до целевого элемента, на котором произошло событие.
Чтобы использовать перехват событий, нужно установить параметр capture в true при добавлении обработчика события.
Объяснение:
- Когда кнопка
childнажата, сначала срабатывает обработчик события на элементеparent(Parent clicked) благодаря установке параметраcaptureвtrue - Затем событие достигает целевого элемента
child, и срабатывает его обработчик (Child clicked)
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Трехфазная модель распространения событий
В процессе обработки события в DOM участвуют три фазы:
1. Capturing Phase (Фаза перехвата). Событие распространяется от корневого элемента (обычно document) вниз по цепочке родителей до целевого элемента.
2. Target Phase (Фаза цели). Событие достигает целевого элемента, на котором произошло событие.
3. Bubbling Phase (Фаза всплытия). Событие распространяется от целевого элемента вверх по цепочке родителей до корневого элемента.
Контроль распространения событий
Существуют методы для управления распространением событий:
stopPropagation(). Останавливает дальнейшее распространение события как во время всплытия, так и во время перехвата.stopImmediatePropagation(). Останавливает дальнейшее распространение события и предотвращает выполнение других обработчиков событий на текущем элементе.preventDefault(). Отменяет действие по умолчанию, связанное с событием (например, отправка формы при нажатии кнопки).
7.4 Пример использования stopPropagation
Объяснение:
- Когда кнопка
childнажата, срабатывает обработчик события на элементеchild(Child clicked) - Всплытие события останавливается с помощью
event.stopPropagation(), и обработчик события на элементеparentне срабатывает
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Останавливает всплытие события
});
</script>
</body>
</html>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ