JS事件冒泡與捕獲

時間 2019-11-11

原文原文鏈接

1事件傳播——冒泡與捕獲

　　默認狀況下，事件使用冒泡事件流，不使用捕獲事件流。然而，在Firefox和Safari裏，你能夠顯式的指定使用捕獲事件流，方法是在註冊事件時傳入useCapture參數，將這個參數設爲true。

2冒泡事件流

　　當事件在某一DOM元素被觸發時，例如用戶在客戶名字節點上點擊鼠標，事件將跟隨着該節點繼承自的各個父節點冒泡穿過整個的DOM節點層次，直到它遇到依附有該事件類型處理器的節點，此時，該事件是onclick事件。在冒泡過程當中的任什麼時候候均可以終止事件的冒泡，在聽從W3C標準的瀏覽器裏能夠經過調用事件對象上的stopPropagation()方法，在Internet Explorer裏能夠經過設置事件對象的cancelBubble屬性爲true。若是不中止事件的傳播，事件將一直經過DOM冒泡直至到達文檔根。

3捕獲事件流

　　事件的處理將從DOM層次的根開始，而不是從觸發事件的目標元素開始，事件被從目標元素的全部祖先元素依次往下傳遞。在這個過程當中，事件會被從文檔根到事件目標元素之間各個繼承派生的元素所捕獲，若是事件監聽器在被註冊時設置了useCapture屬性爲true,那麼它們能夠被分派給這期間的任何元素以對事件作出處理；不然，事件會被接着傳遞給派生元素路徑上的下一元素，直至目標元素。事件到達目標元素後，它會接着經過DOM節點再進行冒泡。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bubble event</title>
    <style type="text/css">
        body{margin:0;}
        #one{
            width:500px;
            height:300px;
            background:rgb(255,0,0);
        }
        #two{
            width:400px;
            height:260px;
            background:rgb(255,50,50);
        }
        #three{
            width:300px;
            height:240px;
            background:rgb(255,100,100);
        }
        #four{
            width:200px;
            height:200px;
            background:rgb(255,150,150);
        }
    </style>
</head>
<body>
    <div id='one'>
      <div id='two'>
        <div id='three'>
          <div id='four'>
          </div>
        </div>
      </div>
    </div>
     
    <script>
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var three = document.getElementById('three');
        var four = document.getElementById('four');
    
        var useCapture = true; //false爲冒泡獲取【目標元素先觸發】    true爲捕獲獲取【父級元素先觸發】
        one.addEventListener('click', function() {
            console.log('one');
        }, useCapture);
        two.addEventListener('click', function() {
            console.log('two');
        }, useCapture);
        three.addEventListener('click', function() {
            console.log('three');
        }, useCapture);
        four.addEventListener('click', function() {
            console.log('four');
        }, useCapture);        
        /*
        false
        冒泡
        點擊four div
        輸出結果：four three two one        
        
        true
        捕獲
        點擊four div
        輸出結果： one two three four
        */
    </script>
</body>
</html>