захват и всплывающее окно в порядке выполнения события - PullRequest
Новая
       22

захват и всплывающее окно в порядке выполнения события

0 голосов
/ 04 ноября 2018

В руководстве w3c есть три фазы события: фаза захвата, фаза цели и фаза пузыря. 

 

window.onload = function(){
    var outA = document.getElementById("outA");  
    var outB = document.getElementById("outB");  
    var outC = document.getElementById("outC");  
    outA.addEventListener('click',function(){alert("bubble1");},false);
    outB.addEventListener('click',function(){alert("bubble2");},false);
    outB.addEventListener('click',function(){alert("capture2");},true);	
    outC.addEventListener('click',function(){alert("target");},true);
    outA.addEventListener('click',function(){alert("capture1");},true);
};
div#outA{
    width:400px; height:400px; background:#CDC9C9;position:relative;
}
div#outB{
    height:200; background:#0000ff;top:100px;position:relative;
}
div#outC{
    height:100px; background:#FFB90F;top:50px;position:relative;
}
<div id="outA">
    <div id="outB">
        <div id="outC">
        </div> 
    </div>
</div>

Теперь позвольте мне кликнуть на div с идентификатором outB, чтобы увидеть, что произойдет.
Первый этап - это этап захвата, который содержит: 

    outB.addEventListener('click',function(){alert("capture2");},true); 
    outA.addEventListener('click',function(){alert("capture1");},true);

outA сначала получите, поэтому сначала alert("capture1"), а затем alert("capture2")

Фаза пузыря содержит: 

    outA.addEventListener('click',function(){alert("bubble1");},false);
    outB.addEventListener('click',function(){alert("bubble2");},false);

outB сначала получает пузырь, поэтому сначала alert("bubble2"), а затем alert("bubble1").

На мой взгляд, порядок потока событий должен быть: 

capture1--capture2--bubble2--bubble1

То, что мы получаем точно, это следующий порядок: 

capture1--bubble2--capture2--bubble1

Почему?

...