Sủi bọt và chụp với addEventListener

Question

Gần đây tôi đã phát hiện ra sự khác biệt giữa Bubbling và Chụp trên các sự kiện DOM, sử dụng javascript. Bây giờ tôi hiểu làm thế nào nó phải làm việc, nhưng tôi đã tìm thấy một tình huống kỳ lạ và tôi muốn biết tại sao điều đó xảy ra.

Theo Quirks mode, sự kiện tuyên truyền bắt đầu bằng cách chụp trên div ngoài, chạm đáy và sau đó vuốt lên trên cùng. Vấn đề là khi tôi bắt đầu làm một số xét nghiệm.

Trên một đầu tiên này, mọi thứ hoạt động như mong đợi:

<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> 

Nếu bạn nhấp vào văn bản, các cảnh báo đi 'chụp ra', 'chụp tại', 'bong bóng trong' và 'bong bóng ra. Sự cố đang sử dụng mã sau:

<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> 

Trong trường hợp này, cảnh báo 'bắt', 'bong bóng', 'chụp vào' và 'bong bóng'. Nếu bạn nhận thấy, sự khác biệt duy nhất là trên thứ hai, bọt khí được chỉ định trước, nhưng tôi không nghĩ điều đó sẽ tạo ra bất kỳ sự khác biệt nào.

Tôi đã thử điều này với Firefox và Chrome và kết quả cũng giống nhau (tôi hiểu rằng trình khám phá internet không xử lý việc chụp).

Answer 1

quirksmode đơn giản hóa mô hình một chút. Sự kiện trên thực tế đi qua up to three phases: capturing, at target, and bubbling.

Nếu bạn đăng nhập các event.eventPhase như thế này:

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

... bạn sẽ thấy rằng 'bong bóng trong' và 'chụp trong' thính giả bắn trong giai đoạn AT_TARGET. Trình lắng nghe sự kiện được gọi cho cùng một phần tử trong cùng một pha được gọi trong thứ tự đăng ký.