Терминология
С quirksmode.org :
Захват событий
Когда вы используете захват событий
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
обработчик событий element1 срабатывает первым, обработчик событий element2 срабатывает последним.
Событие всплывающее
При использовании всплытия событий
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
обработчик событий element2 срабатывает первым, обработчик событий element1 срабатывает последним.
Любое событие, происходящее в модели событий W3C, сначала фиксируется до достижения целевого элемента, а затем снова всплывает .
| | / \
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 \ / | | | |
| -------------------------------- |
| W3C event model |
------------------------------------------
Интерфейс
С w3.org , для захват событий :
Если захват EventListener желает предотвратить дальнейшую обработку
событие происходит, он может вызвать метод stopPropagation
Event интерфейс. Это предотвратит дальнейшую отправку события,
хотя дополнительные EventListeners зарегистрированы в той же иерархии
уровень все равно получит событие. После события stopPropagation
метод был вызван, дальнейшие вызовы этого метода не имеют
дополнительный эффект. Если дополнительных захватчиков не существует и
stopPropagation не был вызван, событие вызывает
присваивать EventListeners самой цели.
Для всплывающих событий :
Любой обработчик событий может предпочесть предотвратить дальнейшее распространение события
вызов метода stopPropagation интерфейса Event. Если есть
EventListener вызывает этот метод, все дополнительные EventListeners на
ток EventTarget будет запущен, но пузырьки при этом прекратятся
уровень. Только один звонок на stopPropagation требуется, чтобы предотвратить дальнейшее
пузыриться.
Для отмены события :
Отмена осуществляется путем вызова Event preventDefault
метод. Если один или несколько EventListeners позвоните preventDefault во время
любая фаза потока событий действие по умолчанию будет отменено.
Примеры
В следующих примерах щелчок по гиперссылке в веб-браузере запускает поток события (слушатели события выполняются) и действие по умолчанию для цели события (открывается новая вкладка).
HTML:
<div id="a">
<a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>
JavaScript:
var el = document.getElementById("c");
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
}
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
}
function bubblingOnClick1(ev) {
el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);
Пример 1 : это приводит к выводу
DIV event capture
A event capture
A event bubbling
DIV event bubbling
Пример 2 : добавление stopPropagation() к функции
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.stopPropagation();
}
приводит к выводу
DIV event capture
Слушатель событий предотвратил дальнейшее распространение события вниз и вверх. Однако это не помешало действию по умолчанию (открытие новой вкладки).
Пример 3 : добавление stopPropagation() к функции
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
ev.stopPropagation();
}
или функция
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
ev.stopPropagation();
}
приводит к выводу
DIV event capture
A event capture
A event bubbling
Это потому, что оба прослушивателя событий зарегистрированы в одной и той же цели события. Слушатели события предотвратили дальнейшее распространение события вверх. Однако они не помешали действию по умолчанию (открытие новой вкладки).
Пример 4 : добавление preventDefault() к любой функции, например
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.preventDefault();
}
предотвращает открытие новой вкладки.