js--事件流、事件委託、事件階段

丶Serendipity丶發表於2022-02-11
JS事件

前言

　　JavaScript 與 HTML 的互動是通過事件實現的，事件代表文件或瀏覽器視窗中某個有意義的時刻。可以使用僅在事件發生時執行的監聽器（也叫處理程式）訂閱事件。本文總結一下 JS 中的事件相關知識點。

正文

　　1、事件流

　　HTML 中與 javascript 互動是通過事件驅動來實現的，例如滑鼠點選事件 onclick、頁面的滾動事件 onscroll 等等，可以向文件或者文件中的元素新增事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行呼叫的，就需要了解一下“事件流”的概念。

　　事件流描述的是從頁面中接收事件的順序,DOM2 級事件流包括下面幾個階段。事件捕獲階段、處於目標階段、事件冒泡階段

　　（1）事件捕獲的意思是最不具體的節點應該最先收到事件，而最具體的節點應該最後收到事件。比如點選頁面的一個div觸發的元素順序分別是document、html、body、div。可以在該階段攔截事件發生

　　（2）處於目標階段即捕獲到實際的目標元素階段，

　　（3）冒泡階段事件方向傳播，從div目標元素傳播至document元素

　　2、事件處理程式

　　事件處理程式指為響應點選，載入，滑鼠等操作而呼叫的函式。有很多方式指定事件處理程式。

　　a、通過html元素屬性指定事件處理程式

    <input type="button" value="點我" onclick="console.log('我被點選了')">

　　b、DOM0 事件處理程式，通過js獲取操作物件元素，並指定事件處理程式

    <button id="btn">點我</button>
    <script>
        var btn = document.getElementById("btn")
        btn.onclick = function () {
            console.log("我被點選了");
        }
    </script>

　　c、DOM2 事件處理程式

　　addEventListener 和 removeEventListener() 是 DOM2 級事件新增的指定事件處理程式的操作，addEventListener方法都接收 3 個引數：要處理的事件名、作為事件處理程式的函式和一個布林值。最後這個布林值引數如果是true，表示在捕獲階段呼叫事件處理程式；如果是 false，表示在冒泡階段呼叫事件處理程式。IE 只支援事件冒泡。通過 addEventListener() 新增的事件處理程式只能使用 removeEventListener() 並傳入與添加時同樣的引數來移除。

    <button id="btn">點我</button>
    <script>
        var btn = document.getElementById("btn")
        btn.addEventListener("click", function () {
            console.log("我被點選了");
        },false)
    </script>

　　d、IE 事件處理程式

　　IE 實現了與 DOM 類似的方法，即 attachEvent() 和 detachEvent() 。這兩個方法接收兩個同樣的引數：事件處理程式的名字和事件處理函式。

    <button id="btn">點我</button>
    <script>
        var btn = document.getElementById("btn");
        btn.attachEvent("onclick", function () {
            console.log("我被點選了");
        });
    </script>

　　在 IE中使用 attachEvent() 與使用 DOM0方式的主要區別是事件處理程式的作用域。使用 DOM0方式時，事件處理程式中的 this 值等於目標元素。而使用 attachEvent() 時,事件處理程式是在全域性作用域中執行的，因此 this 等window。

　　使用 attachEvent() 新增的事件處理程式將使用 detachEvent() 來移除，只要提供相同的引數。

　　3、事件物件

　　a、DOM事件物件event

　　在 DOM 合規的瀏覽器中， event 物件是傳給事件處理程式的唯一引數。

    <button id="btn">點我</button>
    <script>
        var btn = document.getElementById("btn")
        btn.addEventListener("click", function (event) {
            console.log(event);
        }, false)
    </script>

　　列印如下：

 

　　b、IE 事件物件

　　與 DOM 事件物件不同， IE 事件物件可以基於事件處理程式被指定的方式以不同方式來訪問。

　　如果通過DOM方式新增事件處理程式，則event 物件只是 window 物件的一個屬性

    <button id="btn">點我</button>
    <script>
        var btn = document.getElementById("btn")
        btn.addEventListener("click", function () {
            let event = window.event;
            console.log(event);
        }, false)
    </script>

　　如果通過IE事件處理程式，則 event物件會作為唯一的引數傳給處理函式

    <button id="btn">點我</button>
    <script>
        var btn = document.getElementById("btn")
        btn.attachEvent("click", function (event) {
            console.log(event);
        }, false)
    </script>

　　4、跨瀏覽器事件處理

// 包含相容性處理的事件處理函式
const eventUtils={
    //新增事件
    addEvent:function(element,type,handler){
        if (elment.addEventListener) {
            element.addEventListener(type,handler,false)
        } else if(elment.attachEvent){
            element.attachEvent("on"+type,handler)
        }else{
            elment["on"+type]=handler
        }
    },

    //移除事件
    removeEvent:function(element,type,handler){
        if(elment.removeEventListener){
            element.removeEventListener(type,handler,false)
        }else if(element.datachEvent){
            element.datachEvent("on"+type,handler)
        }else{
            element["on"+type]=null
        }
    },
    //獲取事件目標元素
    getTarget:function(event){
        return event.target||event.srcElement
    },
    //獲取event物件的引用，取到事件的所有資訊，確保隨時使用event
    getEvent:function(event){
        return event||window.event
    },
    //阻止事件（主要是事件冒泡，因為ie不支援事件捕獲）
    stopPropagation:function(event){
        if (event.stopPropagation) {
            event.stopPropagation()
        } else {
            event.cancelBubble=true
        }
    },
    //取消事件的預設行為（主要ie事件物件設定returnValue為false可以取消事件預設行為）
    preventDefault:function(event){
        if (event.preventDefault) {
            event.preventDefault()
        } else {
            event.returnValue=false
        }
    }
}

　　5、事件委託

　　簡介：事件委託指的是，不在事件的發生地（直接 dom）上設定監聽函式，而是在其父元素上設定監聽函式，通過事件冒泡，父元素可以監聽到子元素上事件的觸發，通過判斷事件發生元素 DOM 的型別，來做出不同的響應。

　　舉例：最經典的就是 ul 和 li 標籤的事件監聽，比如我們在新增事件時候，採用事件委託機制，不會在 li 標籤上直接新增，而是在ul 父元素上新增。因為所有的li標籤都是ul標籤的後代，在li標籤上觸發事件時，會進行事件冒泡，必定在ul標籤上接收到觸發事件處理程式，通過事件物件可以判斷具體是哪個li標籤觸發的，這樣就省去了重複獲取元素的程式碼。

　　好處：比較合適動態元素的繫結，新新增的子元素也會有監聽函式，也可以有事件觸發機制。減少整個頁面所需的記憶體，提升整體效能

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

相關文章