addEventListener로 버블 링 및 캡쳐하기

Question

최근에 자바 스크립트를 사용하여 DOM 이벤트에서 버블 링 및 캡쳐 링의 차이점을 발견했습니다. 이제는 어떻게 작동해야하는지 이해하지만, 이상한 상황을 발견했으며 그 이유를 알고 싶습니다.

Quirks mode에 따르면 이벤트 전파는 외부 div에서 캡처로 시작하여 하단에 도달 한 다음 맨 위로 거품을냅니다. 문제는 내가 몇 가지 검사를 시작했을 때였 다. 이 첫 번째에

는 모든 것이 예상대로 작동합니다

<div id="out"> 
    <div id="in"> 
     Click This!! 
    </div> 
</div> 
<script type="text/javascript"> 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('capture out'); 
    }, true); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('capture in'); 
    }, true); 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('bubble out'); 
    }, false); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('bubble in'); 
    }, false); 
</script> 

텍스트를 클릭하면 경고 '에 캡처', '거품'과 '거품을'밖으로 캡처 '이동합니다. '거품'을, '밖으로 캡처'경고가 이동이 경우 '에 캡처'와 '버블 아웃'

<div id="out"> 
    <div id="in"> 
     Click This!! 
    </div> 
</div> 
<script type="text/javascript"> 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('bubble out'); 
    }, false); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('bubble in'); 
    }, false); 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('capture out'); 
    }, true); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('capture in'); 
    }, true); 
</script> 

:이 문제는 다음 코드를 사용하고 있습니다. 당신이 알아 차리면, 유일한 차이점은 두 번째 것은 버블 링이 먼저 할당된다는 것입니다. 그러나 나는 그것이 어떤 차이를 만들어 내야한다고 생각하지 않습니다.

Firefox와 Chrome에서이 작업을 시도했으며 그 결과가 동일합니다 (인터넷 탐색기가 캡처를 처리하지 않는다는 것을 이해합니다).

Answer 1

quirksmode는 모델을 약간 단순화했습니다. 실제로 이벤트는 up to three phases: capturing, at target, and bubbling을 거쳐 진행됩니다.

이 같은 event.eventPhase를 기록하는 경우

:

document.getElementById('out').addEventListener('click', function(e){ 
    console.log(e.eventPhase + " : " + e.target.id + " : bubbling"); 
}, false); 

... 당신은 청취자 '의 캡처'는 '거품'과는 AT_TARGET 단계에서 발사 것을 볼 수 있습니다. 동일한 단계에서 같은 요소에 대해 호출 된 이벤트 리스너가 등록 순서로 호출됩니다.