이벤트 캡처 단계는 아이가없는 HTML 요소에서 예상대로 작동하지 않는 것은

Question

은 이제 HTML을

<div id='outer'> 
    Outer Tag 
    <div id='inner'>Inner Tag</div> 
</div> 

적용 이벤트

var outer = document.getElementById('outer'), 
    inner = document.getElementById('inner'); 

outer.addEventListener('click',function(){ 
    console.log('Outer Clicked!') 
}, false); 

outer.addEventListener('click',function(){ 
    console.log('Outer Captured!') 
}, true); // event capture flag set to true 

inner.addEventListener('click',function(){ 
    console.log('Inner Clicked!') 
}, false); 

을 다음 사항을 고려 수 있습니다 노드, 우리는 이벤트를 적용하고있다

Outer Captured! 
Inner Clicked! 
Outer Clicked! 

하지만 난을 따를 때 우리가 inner element를 클릭 할 때 예상되는 아웃 풋은해야한다 F 우리는 HTML 위에서 inner span 다음은 이런 이유를 아무도 설명 할 수

Outer Clicked! 
Outer Captured! 

을 따를 버블 ​​링 단계 후에 해고 단계를 캡처하는 것 같아 제거 ??

Answer 1

대상 요소에는 버블 링과 캡처 사이에 구분이 없습니다. 이벤트는 target phase에 있습니다. 이벤트 핸들러에 등록 된 모든 이벤트 핸들러가 해고되고 설치된 순서대로 해고됩니다.