1. 程式人生 > >簡單的理解事件冒泡與事件捕獲

簡單的理解事件冒泡與事件捕獲

例如下面的圖中外面的綠色的框為父級(parent),裡面的橙色框為子級(child)

 var parent = document.getElementsByClassName("block_P")[0];
    var child = document.getElementsByClassName("block_C")[0];
    parent.onclick=function() {//給父級建立了一個點選事件
        console.log("我是父級");
    };

在上面的程式碼中表示點選綠色區域時會輸出“我是父級”,但是在點選橙色框子時也會輸出“我是父級”,這就可以理解為冒泡事件,即點即子級時會觸發父親的事件,由裡向外去觸發事件。 反之父級去執行給子級繫結的事件時就是事件的捕獲 在這裡插入圖片描述