JS中的事件捕獲和事件冒泡

阿新 • • 發佈：2019-01-09

前言
前段時間給應屆生講JS的事件，順便講了一下事件捕獲和事件冒泡是怎麼一回事兒，但是沒給他具體的例子，這裡新增一段列子，順便給菜鳥們一些具體程式碼來看看冒泡和捕獲是怎麼一回事兒。

1、事件捕獲
捕獲型事件(event capturing)：事件從最不精確的物件(document 物件)開始觸發，然後到最精確(也可以在視窗級別捕獲事件，不過必須由開發人員特別指定)

2、事件冒泡
冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。

3、捕獲和冒泡過程圖

JS捕獲和冒泡過程圖

不同的瀏覽器對事件的處理機制不同
兩種模型
以前，Netscape和Microsoft是不同的實現方式。
Netscape中，parent先觸發，這就叫做事件捕獲。
Microsoft中，child先觸發，這就叫做事件冒泡。
兩種事件處理順序剛好相反。IE只支援事件冒泡，Chrome,Mozilla, Opera 7 和 Konqueror兩種都支援，舊版本的Opera’s 和 iCab兩種都不支援。

W3C模型
W3C模型是將兩者進行中和，在W3C模型中，任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然後，再從事件源往上進行事件冒泡，直到到達document。

4、例項程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡和捕獲測試</title>
    <style>
    *{margin: 0;padding: 0;}
    body{width:100%;} 

    div{width:80%;height: 80%;padding: 10%;position: relative;}
    #a{background: rgba(255,0,0,.6);}
    #b{background: rgba(0,255,0,.6);}
    #c{background: rgba(0,0,255,.6);}
    p{ color:#333;font-size: 1.2em;text-align: center; }
    </style>
</head>
<body>
    <div id="a">
        <p 
> this is a div</p>
        <div id="b">
            <p>this is b div</p>
            <div id="c">
                <p>this is c div</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
            var a = document.getElementById('a'),
                b = document.getElementById('b'),
                c = document.getElementById('c');
            function addEvent(obj,ev,fn){
                if(obj.attachEvent){//針對IE瀏覽器
                    obj.attachEvent('on'+ev,fn)
                }else{//針對FF與chrome
                    obj.addEventListener(ev,fn,false)//當為true時採用事件捕獲，當為false採用事件冒泡
                    //程式設計師可以自己選擇繫結事件時採用事件捕獲還是事件冒泡。
                }
            }
            addEvent(a,'click',function(){ 
                alert('this is a div');
            });
            addEvent(b,'click',function(){ 
                alert('this is b div');
            });
            addEvent(c,'click',function(){ 
                alert('this is c div');
            });
        </script>
</body>
</html>

JS中的事件捕獲和事件冒泡

js中的事件捕獲和事件冒泡，以及由事件冒泡引入的事件委託

JS中的事件捕獲和事件冒泡

jQuery中的事件冒泡、事件捕獲和事件追加引發的問題

事件冒泡，事件捕獲和事件委托

DOM事件機制(事件捕獲和事件冒泡和事件委托)

javascript之事件捕獲和事件冒泡

jsDOM獲取元素方法、事件委託、事件捕獲和事件冒泡

js事件捕獲和冒泡解析

js中的事件維託，事件捕獲，事件冒泡

關於JS中事件捕獲，事件冒泡與事件代理（事件委託），及e.target與e.currentcurrentTarget的區別

JS中事件繫結函式，事件捕獲，事件冒泡

JS中事件綁定函數，事件捕獲，事件冒泡

js事件流事件捕獲及時間冒泡詳解

js 事件冒泡、事件捕獲、事件委託

(點選div之外的區域使div隱藏)原生js。事件代理和事件冒泡

事件冒泡、捕獲和事件委託

JS 事件捕獲、事件冒泡以及事件委託圖文詳解

關於面試中的原生js實現事件代理和事件模型和事件廣播的學習

在js中呼叫控制元件事件的方法和問題

js的事件代理和事件冒泡

JS中的事件捕獲和事件冒泡

相關推薦