English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Пропagation of events - это метод описания "стека" событий, запущенных в веб-браузере.
СобытиеБубенčeníиПерехватДва механизма传播 событий, они описывают, что происходит, когда активируются два обработчика одного и того же типа событий на одном элементе.
Предположим, что вы находитесь<div >Элемент contains<p>Элемент, и пользователь кликнул<p>Элемент, который нужно обработать первым?
<div id="div1">Поимка
<p id="p1">Нажми меня</p>
</div>
<script>
document.querySelector("#div1").addEventListener("click", myFunc, true);
document.querySelector("#p1").addEventListener("click", myFunc, true);
</script>Проверьте, что‹/›Throughcapture(поимка)Событие сначала捕获ывается наиболее внешним элементом и передается внутрь.
ThroughБубенčení, событие сначала捕获 и обрабатывается наиболее внутренним элементом, а затем распространяется на внешние элементы.
Используя этотaddEventListener()Метод, вы можете использовать " useCapture Параметр определяет тип распространения, ниже приведено подробное объяснение грамматики useCapture.
element.addEventListener(event, listener, useCapture)
Значение по умолчанию для "useCapture" - false, что означает использование бубенченья по умолчанию; а если значение установлено в true, то событие будет использовать распространение по перехвату.
Введение концепции распространения событий предназначено для обработки ситуаций, когда у нескольких элементов DOM-структуры, имеющих父子-отношения, есть обработчики событий для одного и того же события (например, клик мыши). Теперь проблема в том, какой элемент будет обработан первым при клике на внутренний элемент, это внешний элемент или внутренний элемент.
Когда событие инициируется на элементе с родительским элементом (например, в данном примере<p>), браузер выполняет два различных этапа - фазу перехвата и фазу бубенченья.
ВПерехватФаза:
Браузер проверяет наиболее внешний родительский элемент элемента (<html>был ли зарегистрирован обработчик события onclick в фазе перехвата, и если да, то запускает этот обработчик.
Затем, оно переходит кв <html>следующего элемента и выполняет аналогичную операцию, затем выполняет следующее, и так далее, до достижения фактического элемента,单击 который.
ВБубенčeníФаза, наоборот:
Браузер проверяет, зарегистрирован ли обработчик события onclick на фактическом элементе,单击 который в фазе бубенčení, и если да, то запускает этот обработчик.
Затем, оно переходит к следующему прямому родительскому элементу и выполняет следующее, и так далее, до<html>до элемента.
В основных браузерах по умолчанию все обработчики событий зарегистрированы в фазе бубенčení.
В фазе перехвата, событие распространяется от Window向下 через DOM-дерево до目标是тока.
document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);Проверьте, что‹/›Только приaddEventListener()Когда третий параметр установлен в true,捕获事件 только используется вместе с зарегистрированными обработчиками событий в момент регистрации.
В фазе перебрасывания, наоборот. В этой фазе события распространяются или перебрасываются, от целевого элемента до Window, по DOM-дереву вверх.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);Проверьте, что‹/›Все браузеры поддерживают перебрасывание событий, и перебрасывание событий применимо ко всем обработчикам, независимо от того, как они зарегистрированы (например, с помощью onclick или addEventListener()).
Чтобы предотвратить уведомление любых обработчиков событий предков о событии с помощью метода event.stopPropagation(), также можно остановить распространение события в среднем.
В следующем примере, если нажать на подэлемент, не будет выполняться слушатель события click на родительском элементе:
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("You clicked: " + this.tagName);
event.stopPropagation();
}Проверьте, что‹/›Целевым элементом является DOM-узел, генерирующий событие.
Например, если пользователь нажмет на гиперссылку, целевым элементом является гиперссылка.
Доступ к целевому элементу осуществляется через event.target, в фазе распространения события он не изменяется.
document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
alert("target = " + event.target.tagName);
}Проверьте, что‹/›Некоторые события имеют связанные с ними стандартные действия. Например, если вы нажмете на ссылку, браузер перенесет вас к цели ссылки, если вы нажмете на кнопку отправки формы, браузер отправит форму и т.д. Вы можете использовать метод event.preventDefault() объекта события, чтобы предотвратить такие стандартные действия.
function myFunc() {
event.preventDefault();
}Проверьте, что‹/›Однако, предотвращение стандартного поведения не предотвращает распространение события; событие продолжает распространяться по DOM-дереву как обычно.
Перебрасывание также позволяет нам использовать делегирование событий.
Делегирование событий позволяет вам избежать добавления слушателей событий к определенным узлам; вместо этого слушатели событий добавляются к родительскому объекту.
Эта концепция основана на следующем факте: если вы хотите запустить某些 код при нажатии на任何一个 из множества подэлементов, вы можете установить слушатель событий на их родительском элементе и позволить событиям, происходящим на них, перебрасываться на родительский элемент, не нужно устанавливать слушатель событий для каждого ребенка отдельно.
В этом примере, если вы хотите выводить сообщение при нажатии, вы можете добавить слушатель событий click к родительскому<ul>Установите слушатель событий click, который будет выводить список элементов
<ul id="parent-list">
<li id="post-1">Элемент 1</li>
<li id="post-2">Элемент 2</li>
<li id="post-3">Элемент 3</li>
<li id="post-4">Элемент 4</li>
<li id="post-5">Элемент 5</li>
<li id="post-6">Элемент 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
if(event.target && event.target.nodeName == "LI") {
alert("Элемент списка " + event.target.id.replace("post-", "") + " был нажат!");
}
});
</script>Проверьте, что‹/›