Что такое пузырь и захват событий?

В чем разница между всплытием и захватом событий? Когда следует использовать пузыри против захвата?

Ответы

Ответ 1

Пузырьки и захват событий - это два способа распространения событий в API DOM HTML, когда событие происходит в элементе внутри другого элемента, и оба элемента зарегистрировали дескриптор этого события. Режим распространения события определяет, в каком порядке элементы получают событие.

При пузырьковании событие сначала захватывается и обрабатывается самым внутренним элементом, а затем распространяется на внешние элементы.

При захвате событие сначала захватывается самым внешним элементом и распространяется на внутренние элементы.

Захват также называется "ручеек", который помогает запомнить порядок распространения:

сочиться

В прежние времена Netscape выступал за захват событий, в то время как Microsoft поощряла всплытие событий. Оба являются частью стандарта событий объектной модели документа W3C (2000).

IE <9 использует только всплывающие события, тогда как IE9+ и все основные браузеры поддерживают оба. С другой стороны, производительность всплывающих событий может быть немного ниже для сложных DOM.

Мы можем использовать addEventListener(type, listener, useCapture) чтобы зарегистрировать обработчики событий либо в режиме пузырьков (по умолчанию), либо в режиме захвата. Чтобы использовать модель захвата, передайте третий аргумент как true.

пример

<div>
    <ul>
        <li></li>
    </ul>
</div>

В приведенной выше структуре предположим, что в элементе li произошло событие click.

В модели захвата событие будет сначала обрабатываться div (сначала будут запускаться обработчики события click в div), затем в ul, затем в последнем в целевом элементе li.

В пузырьковой модели произойдет обратное: сначала событие будет обработано li, затем ul и, наконец, элементом div.

Для получения дополнительной информации см.

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

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML += ('<p>' + msg + '</p>');
}

function capture() {
    log('capture: ' + this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: ' + this.firstChild.nodeValue.trim());
}

function clearOutput() {
    logElement.innerHTML = "";
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);
p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}
<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>

Ответ 2

Описание:

quirksmode.org имеет хорошее описание этого. В двух словах (скопировано из quirksmode):

Запись событий

При использовании захвата событий

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

обработчик события element1 срабатывает первым, последний обработчик события element2 срабатывает.

Банкротство событий

При использовании барботажа событий

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

обработчик события element2 срабатывает первым, последний обработчик элемента element1 срабатывает.

Что использовать?

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

Ответ 3

Если есть два элемента: элемент 1 и элемент 2. Элемент 2 находится внутри элемента 1, и мы присоединяем обработчик событий, в котором оба элемента позволяют указывать onClick. Теперь, когда мы нажимаем на элемент 2, будет выполняться eventHandler для обоих элементов. Теперь здесь возникает вопрос, в каком порядке будет выполняться событие. Если событие, связанное с элементом 1, выполняется первым, оно называется захватом события, и если событие, связанное с элементом 2, выполняется первым, это называется барботированием событий. В соответствии с W3C событие начнется на этапе захвата до достижения цели, возвращается к элементу, а затем начинает пузыриться

Состояние захвата и барботирования известно параметром useCapture метода addEventListener

eventTarget.addEventListener(тип, слушатель, [, useCapture]);

По умолчанию useCapture является ложным. Это означает, что он находится в стадии барботирования.

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");

div1.addEventListener("click", function (event) {
  alert("you clicked on div 1");
}, true);

div2.addEventListener("click", function (event) {
  alert("you clicked on div 2");
}, false);
#div1{
  background-color:red;
  padding: 24px;
}

#div2{
  background-color:green;
}
<div id="div1">
  div 1
  <div id="div2">
    div 2
  </div>
</div>

Ответ 4

Я нашел этот учебник на javascript.info очень ясным в объяснении этой темы. И его резюме из 3 пунктов в конце действительно говорит о важных моментах. Я цитирую это здесь:

  1. События сначала фиксируются до самой глубокой цели, а затем всплывают. В IE <9 они только пузырьковые.
  2. Все обработчики работают на стадии пузырьков, за исключением addEventListener с последним аргументом true, который является единственным способом перехватить событие на этапе захвата.
  3. Пузырьки/захват могут быть остановлены с помощью event.cancelBubble=true (IE) или event.stopPropagation() для других браузеров.

Ответ 5

Также Event.eventPhase свойство Event.eventPhase которое может сообщить вам, находится ли событие в назначении или откуда-то еще.

Обратите внимание, что совместимость браузера еще не определена. Я протестировал его на Chrome (66.0.3359.181) и Firefox (59.0.3), и он поддерживается там.

Расширяя уже большой фрагмент из принятого ответа, это вывод с использованием свойства eventPhase

var logElement = document.getElementById('log');

function log(msg) {
  if (logElement.innerHTML == "<p>No logs</p>")
    logElement.innerHTML = "";
  logElement.innerHTML += ('<p>' + msg + '</p>');
}

function humanizeEvent(eventPhase){
  switch(eventPhase){
    case 1: //Event.CAPTURING_PHASE
      return "Event is being propagated through the target ancestor objects";
    case 2: //Event.AT_TARGET
      return "The event has arrived at the event target";
    case 3: //Event.BUBBLING_PHASE
      return "The event is propagating back up through the target ancestors in reverse order";
  }
}
function capture(e) {
  log('capture: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

function bubble(e) {
  log('bubble: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', capture, true);
  divs[i].addEventListener('click', bubble, false);
}
p {
  line-height: 0;
}

div {
  display:inline-block;
  padding: 5px;

  background: #fff;
  border: 1px solid #aaa;
  cursor: pointer;
}

div:hover {
  border: 1px solid #faa;
  background: #fdd;
}
<div>1
  <div>2
    <div>3
      <div>4
        <div>5</div>
      </div>
    </div>
  </div>
</div>
<button onclick="document.getElementById('log').innerHTML = '<p>No logs</p>';">Clear logs</button>
<section id="log"></section>

Ответ 6

кипение

  Event propagate to the Upto root element is Bubbling.

Захватив

  Event propogate from body(root) element to eventTriggered Element is Capturing.

Ответ 7

Расширяя ответ других здесь

Пузырьки событий: Получение событий от самого внутреннего до внешнего контроля.

Захват событий: Получение событий от самого внешнего до самого внутреннего контроля.

Метод addEventListener() используется для включения/выключения всплытия и захвата событий. Этот метод имеет три параметра. Если для третьего параметра (фазы) задано значение true, захват событий включен, а если для него задано значение false, то всплывающее окно событий включено (это поведение по умолчанию).

Если вы хотите, чтобы активировались даже пузырьковое копирование и захват, то назначьте обработчики 2 раза, один раз с параметром фазы, равным false, и один раз с параметром фазы, равным true, как показано ниже.

<html>
<head>
    <style type="text/css">
        .divStyle
        {
            display: table-cell;
            border: 5px solid black;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="DIV1" class="divStyle">
        DIV 1
        <div id="DIV2" class="divStyle">
            DIV 2
            <div id="DIV3" class="divStyle">
                DIV 3
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var divElements = document.getElementsByTagName('div');

        for (var i = 0; i < divElements.length; i++)
        {
            divElements[i].addEventListener("click", clickHandler, false);
            divElements[i].addEventListener("click", clickHandler, true);
        }

        function clickHandler()
        {
            alert(this.getAttribute("id") + " click event handled");
        }
    </script>
</body>
</html>

Обратите внимание: IE8 и более ранние версии не поддерживают метод addEventListener(). Это подразумевает, что захват событий не поддерживается в IE8 и более ранних версиях, и, следовательно, приведенный выше код не будет работать в IE 8 и более ранних версиях.