事件被觸發三階段

　　1. document往事件觸發處傳播，會觸發遇到註冊的捕獲事件；

　　2. 傳播到事件觸發處，觸發註冊事件；

　　3. 從事件觸發處往document傳播，遇到註冊的冒泡事件，會觸發。

　　事件觸發機制一般會按上面的順序觸發，但也有特例，如果給一個目標節點同時註冊冒泡事件和捕獲事件，事件觸發會按註冊的順序執行。

<div class="wrapper">
        <div class="content">
            <div class="item"></div>
        </div>
    </div>

addEventListener第三個參數false/true分別代表冒泡/捕獲，默認值為false；

        var oWrapper = document.getElementsByClassName(‘wrapper‘)[0];
        var oContent = document.getElementsByClassName(‘content‘)[0];
        var oItem = document.getElementsByClassName(‘item‘)[0];
        oWrapper.addEventListener(‘click‘, () => {
            console.log(‘冒泡 wrapper‘);
        }, false);
        oWrapper.addEventListener(‘click‘, () => {
            console.log(‘捕獲 wrapper‘);
        }, true);

        oContent.addEventListener(‘click‘, () => {
            console.log(‘冒泡 content‘);
        }, false);
        oContent.addEventListener(‘click‘, () => {
            console.log(‘捕獲 content‘);
        }, true);

        oItem.addEventListener(‘click‘, () => {
            console.log(‘冒泡 item‘);
        }, false);
        oItem.addEventListener(‘click‘, () => {
            console.log(‘捕獲 item‘);
        }, true);

　　如果點擊目標節點item，控制臺打印

　　如果我們改變item事件註冊順序

        oItem.addEventListener(‘click‘, () => {
            console.log(‘捕獲 item‘);
        }, true);
        oItem.addEventListener(‘click‘, () => {
            console.log(‘冒泡 item‘);
        }, false);

　　再點擊item，此時打印

阻止事件冒泡捕獲

• 一般我們只希望事件觸發在目標上，這時候可以使用stopPropagation來阻止事件進一步傳播。通常我們認為 stopPropagation 來阻止事件冒泡的，其實該函數還可以用來阻止事件捕獲。

　　1. 如果在content捕獲事件上加上stopPropation，會阻止事件繼續向下傳播。

oContent.addEventListener(‘click‘, (e) => {
            console.log(‘捕獲 content‘);
            e.stopPropagation();
        }, true);

　　控制臺打印

　　2. 但如果在目標事件上加stopPropation函數，自身的捕獲事件和冒泡事件都會觸發

　　在item捕獲事件上加stopPropation函數

        oItem.addEventListener(‘click‘, (e) => {
            e.stopPropagation();
            console.log(‘捕獲 item‘);
        }, true);
        oItem.addEventListener(‘click‘, (e) => {
            console.log(‘冒泡 item‘);
        }, false);

　　控制臺打印

• stopImmediatePropagation 同樣也能實現阻止事件，但是該函數還能阻止該事件目標執行別的註冊事件。

        oItem.addEventListener(‘click‘, (e) => {
            e.stopImmediatePropagation();
            console.log(‘捕獲 item‘);
        }, true);
        oItem.addEventListener(‘click‘, (e) => {
            console.log(‘冒泡 item‘);
        }, false);

　　控制臺打印

事件代理

　　如果一個節點中的子節點是動態生成的或者需要註冊同樣的事件過多，那麽子節點需要註冊的事件應該註冊在父節點上、

    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let oUl = document.getElementById(‘ul‘);
        oUl.addEventListener(‘click‘, (e) => {
            console.log(e.target.innerText);
        })
    </script>

瀏覽器事件機制