事件的三個階段:捕獲階段 目標階段 冒泡階段

NO IMAGE

js有好多的知識需要不斷積累,但是不能淺嘗,應該深究其內因,並運用在日常開發過程中。

  1. 捕獲階段:

    事件從根節點流向目標節點,途中流經各個DOM節點,在各個節點上觸發捕獲事件,直到達到目標節點。

    那麼捕獲階段有什麼用嗎?完全可以沒有捕獲階段也可以啊?

    捕獲階段的主要任務是建立傳播路經,在冒泡階段根據這個路經回溯到文件根節點

  2. 目標階段
    事件到達目標節點時,就到了目標階段,事件在目標節點上被觸發

  3. 冒泡階段
    事件在目標節點上觸發後,不會終止,一層層向上冒,回溯到根節點。

  4. 運用舉例:

    html程式碼

      <div class="a">
    <li class="b">
    <a href="#" class="c">buhuo</a>
    </li>
    </div>

    js程式碼

    var div = document.getElementsByClassName('a')[0];    //注意[0]
    var li = document.getElementsByClassName('b')[0];
    var a = document.getElementsByClassName('c')[0];
    //第三個引數預設是false,
    //是對事件冒泡過程新增函式進行處理
    div.addEventListener('click',function(event){
    console.log('div');
    });
    li.addEventListener('click',function(event){
    console.log('li');
    });
    a.addEventListener('click',function(event){
    console.log('a');
    });
    //事件捕獲過程處理
    //第三個引數設為true
    div.addEventListener('click',function(event){
    console.log('div');
    },true);
    li.addEventListener('click',function(event){
    console.log('li');
    },true);
    a.addEventListener('click',function(event){
    console.log('a');
    },true);
    

    執行結果
    div
    li
    a
    a
    li
    div

    可知:首先是捕獲階段執行,再是冒泡階段

  5. 運用在事件委託上
    JavaScript事件代理可以把事件處理器新增到一個父元素上,這樣就避免了把事件處理器新增到多個子元素上。

  6. 阻止事件冒泡

    某個DOM節點繫結了某事件監聽器,本來是想當該DOM節點觸發事件,才會執行回撥函式。結果是該節點的某後代節點觸發某事件,由於事件冒泡,該DOM節點事件也會觸發,執行了回撥函式,這樣就違背了最初的本意了。

    html

    <!-- 阻止事件冒泡 -->
    <li class="aa">
    <a href="#" class="bb">阻止事件冒泡</a>
    <a href="#" class="cc">cc</a>
    </li>

    js

    var li1 = document.getElementsByClassName('aa')[0];
    li1.addEventListener('click',function(event){
    if(event.target.tagName.toLowerCase() === 'li'){
    console.log(event.target);
    }
    console.log(event.currentTarget);  //監聽節點
    })
    for(var i=0;i<li1.children.length;i  ){
    li1.children[i].addEventListener('click',function(event){
    event.stopPropagation();  //在子元素上阻止冒泡
    })
    }

    結果
    點選a標籤時,沒有任何反應,當點選li標籤時,會輸出物件

    注意:
    無法在捕獲階段阻止事件冒泡
    所以當上述程式碼加上true後,達不到效果