JavaScript-父子dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡時執行順序

原創

2020-02-20 14:44

JavaScript-父子dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡時執行順序

事件的執行順序絕對是讓人頭疼的問題。當父元素與子元素都綁定了多個事件，且有的綁定在冒泡階段、有的綁定在捕獲階段時，事件的觸發順序如何？如果你只關心這個問題，請直接下滑到3. 綁定多個事件，且由用戶行爲觸發。如果你想細緻瞭解JavaScript中的事件發生，請慢慢閱讀。

1. 原生事件的發生順序

一般來講，當爲一個a標籤添加click事件以後，點擊這個標籤，會先執行綁定的事件、後跳轉頁面。一個input綁定blur事件以後，你在input裏輸入完內容，點擊提交按鈕，會先發生blur事件，後發生click事件。當然，這是一般來講。我在一個React項目中曾經發生表單提交時，先發生click事件，blur事件沒有來得及發生，造成表單內容沒有檢驗就提交到後臺，原因我至今沒有找到，解決辦法是在click事件上加一個50ms的延遲。

2. 自定義事件

JavaScript中也支持手動觸發事件，請看下面代碼。

         a.addEventListener('click', function(){
            console.log(input.value);
            console.log(this.getAttribute('href'));
            console.log(location.href);
        }, false); //a是我已經通過id獲得好的一個a標籤

         var event = document.createEvent('HTMLEvents'); // initEvent接受3個參數: 事件類型，是否冒泡，是否阻止瀏覽器的默認行爲
        event.initEvent('click', true, true);    
        event.eventType = 'click'; 
        //觸發a上綁定的自定義事件   
        a.dispatchEvent(event);   
//注：jQuery中有更簡單的trigger()方法實現自定義事件功能

JavaScript中自定義事件的類型有（即document.createEvent('HTMLEvents')中的參數）：
1. UIEvents：一般化的UI事件。
2. MouseEvents：一般化的鼠標事件。
3. MutationEvents：一般化的DOM變動事件。
4. HTMLEvents：一般化的HTML事件。
自定義事件的發生比較容易控制，你什麼時候觸發(dispatchEvent/fireEvent)它，它就什麼時候發生。

3. 綁定多個事件，且由用戶行爲觸發

這個情況最複雜，也是標題中的情況：父元素與子元素都綁定多個事件，且有的事件在捕獲階段、有的事件在冒泡階段。

下面這個例子，父元素div綁定兩個事件（一個冒泡階段、一個捕獲階段），子元素也是這種情況。事件觸發順序如何。

        var btn = document.querySelector('button');
        var div = document.querySelector('div');

        btn.addEventListener('click', function(){
            console.log('bubble','btn');
        },false);
        btn.addEventListener('click', function(){
            console.log('capture','btn');
        },true);

        div.addEventListener('click', function(){
            console.log('bubble','div');
        },false);
        div.addEventListener('click', function(){
            console.log('capture','div');
        },true);