Поток событий DOM и делегирование событий
всплывающее окно события
Поток событий в IE называется всплытием событий , то есть событие вначале принимается наиболее специфичным элементом (узлом с самым глубоким уровнем вложенности в документе), а затем распространяется до менее специфичного узла (документа). ). Все современные браузеры поддерживают всплывающую подсказку событий и будут всплывать события вплоть до объекта окна.
захват событий
Идея захвата событий заключается в том, что менее специфичные узлы должны получать события раньше, а наиболее специфичные узлы должны получать события последними. Целью захвата события является захват события до того, как оно достигнет своего предназначения. Поддержка IE9+, Safari, Chrome, Opera и Firefox и захват из окна (хотя спецификация событий уровня DOM2 требует из документа). Немногие используют захват событий, потому что старые браузеры его не поддерживают.
Проще говоря, захват событий — это перехват событий.
Поток событий DOM
Поток событий также называется распространением событий.Поток событий, обусловленный событиями уровня DOM2, включает три фазы: фаза захвата события (фаза захвата), целевая фаза (целевая фаза) и фаза всплытия событий (фаза пузырьков).
Первое, что происходит, это захват события, который дает возможность перехватить событие. Затем фактическая цель получает событие, а последний этап — это этап всплытия, на котором можно отреагировать на событие.
Проще говоря, это последовательный поток выполнения событий.В DOM-дереве большое количество элементов.Когда элементы вложены, события устанавливаются для родительского и дочернего элементов одновременно.Выполнение события родительского и дочерние элементы будут выполняться в определенном порядке, это поток событий.
DOM поддерживает две модели событий одновременно, фиксируя поток событий и всплывающий поток событий.
** Пузырьковый поток событий: ** Событие отправляется от определенной цели события к наименее конкретной цели события, т. е. от листа к корню (снизу вверх).
пример:
<style>
.box1{
width: 300px; height: 300px;background-color: red;}
.box2{
width: 200px; height: 200px;background-color: rgb(78, 62, 150);}
.box3{
width: 100px; height: 100px;background-color: rgb(39, 180, 150);}
</style>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
Когда дочерний элемент срабатывает, он вызывает одно и то же событие всех родительских элементов вверх по очереди.
**Захват потока событий: **Распространение событий происходит от наименее конкретной цели события к наиболее конкретной цели, от корня к листу (сверху вниз)
пример:
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
<script>
var box1=document.getElementsByClassName('box1');
var box2=document.getElementsByClassName('box2');
var box3=document.getElementsByClassName('box3');
</script
Делегация мероприятия и делегация мероприятия
делегация мероприятия
Делегируйте события другому элементу. Фактически, используя принцип всплытия событий DOM, делегирование событий родительского узла, которое связывает событие с целевым элементом, может стать прокси-сервером события.
Проще говоря, это делегирование события, изначально привязанного к дочернему элементу, родительскому элементу и предоставление возможности родительскому элементу прослушивать событие.
Преимущества: Преимущества делегирования событий: это может сократить регистрацию событий и сэкономить память. Также можно понять, что при добавлении нового объекта нет необходимости снова привязывать событие
прокси события
Разговорное описание агента событий: есть два элемента a и b, b будет вложен в a в будущем, но b еще не существует и будет создан в будущем. b, но b в данный момент не существует, поэтому не может. Как настроить событие? b доверяет элементу a помощь в настройке событий, мы называем это делегированием событий. Это называется делегированием событий при рассмотрении проблемы с точки зрения b. Рассматривая проблему с точки зрения a, a делегирует b для привязки событий к b, что называется прокси-сервером событий. Таким образом, делегирование события и прокси-сервер события на самом деле одно и то же, но с разных точек зрения.
**Различие: **Делегирование событий обычно применяется в сценариях виртуального DOM, то есть некоторые элементы DOM еще не существуют, и если вы хотите привязать к ним события, вам нужно использовать их родительские элементы, чтобы помочь им привязать события
DOM Уровень 0, Уровень 2, Уровень 3
Уровень DOM0
Событие уровня DOM0 предназначено для назначения функции атрибуту обработки события.
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('DOM0级');
}
</script>
Уровень DOM2
На основе событий уровня DOM0 он компенсирует недостаток, заключающийся в том, что обработчик не может одновременно связать несколько обработчиков, и позволяет добавить к обработчику несколько обработчиков.
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
function showFn() {
alert('DOM2级');
}
btn.addEventListener('click', i, false);
</script>
Уровень DOM3
События уровня DOM3 добавляют больше типов событий на основе событий уровня DOM2, все типы следующие:
1. Событие пользовательского интерфейса, срабатывающее, когда пользователь взаимодействует с элементами на странице, например: загрузка, прокрутка
2. Событие фокуса, когда элемент Запускается при получении или потере фокуса, например: размытие, фокус
3. События мыши, инициируемые, когда пользователь выполняет операции на странице с помощью мыши, такие как: dbclick, mouseup
4. События колеса, инициируемые, когда используется колесико мыши или аналогичные устройства, например: колесико мыши
5. Текстовое событие, срабатывающее при вводе текста в документ, например: textInput
6. Событие клавиатуры, срабатывающее, когда пользователь выполняет операции на странице с помощью клавиатуры, например : keydown, keypress
7. Синтетическое событие, когда IME (редактор методов ввода) запускается при вводе символов, например:compositionstart
8.Событие Change, запускается при изменении базовой структуры DOM, например: DOMsubtreeModified