Если есть два элемента: элемент 1 и элемент 2. Элемент 2 находится внутри элемента 1, и мы присоединяем обработчик событий, в котором оба элемента позволяют говорить onClick. Теперь, когда мы нажимаем на элемент 2, будет выполняться eventHandler для обоих элементов. Теперь здесь возникает вопрос, в каком порядке будет выполняться событие. Если событие, связанное с элементом 1, выполняется первым, оно называется захватом события, и если событие, связанное с элементом 2, выполняется первым, это называется барботированием событий. Согласно W3C событие начнется на этапе захвата до тех пор, пока оно не достигнет цели, возвращается к элементу, а затем начинает пузыриться
Состояние захвата и пузырения известно с помощью параметра useCapture метода addEventListener
eventTarget.addEventListener (type, listener, [, useCapture]);
blockquote>По умолчанию 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>
Попробуйте изменить true и false.