前端面試之瀏覽器機制中觸發事件的三個階段

wangxiaojin發表於2018-08-13
前端面試瀏覽器事件

你知道瀏覽器事件機制中觸發事件的三個階段是什麼嗎? 這是經常被問及的問題,現在我們們就來看看.

  <div class="box" style="width:300px;height:300px;background:green;">
        parent
        <div class="child">child
            <div class="button">提交</div>
        </div>
    </div>
複製程式碼
 var divs=document.querySelectorAll("div");//獲取所有的divs
    function fn0(){
        alert("box");
    }
    function fn1(){
        alert("child");
    }
    function fn2(){
        alert("but");
    }
    divs[0].addEventListener("click",fn0,false);
    divs[1].addEventListener("click",fn1,false);
    divs[2].addEventListener("click",fn2,false);

複製程式碼

瀏覽器機制中觸發事件的三個階段:

  • 事件捕獲
  • 事件目標處理函式
  • 事件冒泡

描述:

  • 當達到某個條件觸發了某個元素繫結的事件的時候,就會從document頂級元素髮送一個事件流,順著dom樹一層一層向下查詢,直到找到了目標元素,這個層層查詢的過程稱為事件的捕獲,在這個階段不會觸發繫結的事件.
  • 達到目標元素,這個階段稱為"事件目標處理函式",觸發這個元素繫結的事件
  • 然後就從目標元素開始一層層往頂層元素傳遞,在這個過程中如果發現元素繫結了此型別的事件,就會觸發,這就是事件冒泡.

其中addEventListener第三個引數預設為false,代表冒泡階段執行,如果改為true,就代表在捕獲階段執行. 如果想要阻止冒泡行為,可以用e.stopPropagation() 或 e.cancelBubble = true（IE）

相關文章