JS событие барботирование предотвращает флажок проверен статус

Question

Я пытаюсь понять разницу между всплытием событий и туннелированием событий (захват в Javascript).

В wpf вы должны обработать событие, прежде чем событие достигнет элемента управления.В JS, похоже, это не так.

Почему нет разницы между захватом истинным и ложным?Я ожидал, что флажок установлен в примере внизу.Я не хочу предотвращать распространение событий, но просто понимаю этот эффект.

document.querySelector("html").addEventListener("click", function(event) {
  document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
  event.preventDefault();
}, {
  capture: false
});

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>

Answer 1

Параметр

Цитирование MDN useCapture влияет только на порядок, в котором событие распространяется вниз по дереву DOM.

Логическое значение, указывающее, будут ли события этого типа отправляться зарегистрированному слушателю перед отправкой в ​​любой объект EventTarget под ним в дереве DOM.

Как только у вашего фрагмента будет только один прослушиватель событий, вы действительно не сможете заметить никакого наблюдаемого эффекта. Однако, если вы добавите еще один, то есть

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
    document.getElementById("output-box").innerHTML += "Checkbox capture";       
});

вы заметите, как меняется порядок выполнения в зависимости от опции захвата внешнего обработчика. Если вы хотите, чтобы флажок был установлен, вы можете использовать его следующим образом.

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
    event.stopPropagation();    
    document.getElementById("output-box").innerHTML += "Checkbox capture";       
});

Здесь stopPropagation предотвращает появление событий. Таким образом, событие не будет обработано в дереве DOM и preventDefault не будет вызвано. Если вы хотите, чтобы выполнялся только верхний обработчик, вы можете использовать

document.querySelector("html").addEventListener("click", function(event) {
  document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
  event.stopPropagation();
  event.preventDefault();
}, {
  capture: true
});

Здесь комбинация capture: true и stopPropagation предотвращает захват события в дереве DOM.

Answer 2

Как поясняется в документации, эта переменная является логическим значением, указывающим, должно ли событие быть передано в текущий обработчик события перед передачей в прослушиватель события следующего элемента.Просто поймите, что когда вы запускаете событие в js, оно сначала передается «первому» элементу и идет все глубже и глубже.Затем, когда он достигнет самого глубокого элемента, событие вернется к первому (мы говорим о пузырении).

Этот пример должен помочь вам понять:

document.getElementsByTagName("input")[0].addEventListener("click", function(event) {
  alert("event from the checkbox");
});

document.getElementsByTagName("body")[0].addEventListener("click", function(event) {
  alert("event from the body");
}, {
  capture: false
});

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>