JS 事件冒泡、捕獲。學習記錄

時間 2019-11-12

原文原文鏈接

做爲一個轉行剛到公司的新人，任務很少，這一週任務所有消滅，閒暇的一天也別閒着，悄悄的看起了書。今天寫一下JS的事件冒泡、捕獲。javascript

也是今天看的內容有點多了，有些消化不了，就隨手記錄一下。純屬自我理解，若是有不對，還請指導提出，小弟必定改正。css

好了，話很少說。那麼事件冒泡是什麼？html

舉個例子 ul > li > div > p 。這個時候你點擊P，他會一層一層的往上執行，直到最後綁定事件的元素。假如咱們綁定事件在ul上，那麼點擊P，他就會逐級往上走，直到找到綁定事件的ul也會觸發事件，那麼在上面已經沒有元素了，他就停下了。java

若是說你還不懂，那麼沒辦法了，由於愛，再給你解釋一遍。ps：你家如今有4我的。爸爸 > 媽媽 > 你。好了，那如今你爸手握大權（事件綁定在奶奶這），這時候你爺爺睡午覺，你長得太醜把他嚇醒了，一巴掌呼在在你大臉上。你開心的就哭了，回家告狀去了。這個時候你告狀的順序就是你 > 媽媽 > 爸爸。那麼你回去看一遍上面的順序是否是就和事件冒泡同樣？dom

你還不懂那我只能上代碼了函數

<!DOCTYPE html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="">
</head>
<style type="text/css">
    #click{
        width: 500px;
        height: 500px;
        background-color: red;
        margin: 0 auto;    }
    #click2{
        width: 250px;
        height: 250px;
        background-color: yellow;
    }
</style>
<body>
<div id="click">
　　<div id="click2" class="son"></div>
</div>
<script type="text/javascript">
        document.getElementById("click2").addEventListener("click",function(e){
            alert("有事打我爸，別打我，");
        },false);

        document.getElementById("click").addEventListener("click",function(e){ alert("有什麼事打我，別打我兒子"); },false);

</script> </body> </html>

一、若是我點擊ID=click2，也就是第二個，那麼會發生什麼？他會先觸發click2的事件，接着往上走，再觸發click的事件。

二、當點擊ID=click元素時，只觸發自身的點擊事件，由於他本身冒泡上去沒有dom元素設置了click事件的函數..spa

那麼什麼是事件捕獲呢？code

剛纔說了，事件冒泡就是從底層往底層走。那麼捕獲恰好反過來，是從頂層往裏面走。htm

也就是說剛纔的 ul > li > div > p 例子。事件冒泡是從P到ul，那麼事件捕獲就是ul到p。舉個例子，加入點擊事件觸發了，他是從從根元素開始就會往下尋找匹配這個事件的子元素，直到找到他。blog

若是還不懂那麼上兩張圖吧，一張是事件冒泡的，一張是事件捕獲的。自行參考（圖由本人靈魂畫師所制，不足之處請指點）

圖爲事件冒泡

圖爲事件捕獲。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。