js事件詳解

xioqua 發布于2019-08-29 12:47 / 938人閱讀

摘要：使用級方法指定的事件處理程序被認為是元素的方法。用于立即停止事件在中的傳播，取消進一步的事件捕獲或冒泡。捕獲事件目標對象冒泡只有在事件處理程序執行期間，對象才會存在，執行完成后，對象就會被銷毀。

引用

事件是我認為前端最特別的地方，這是唯一其他語言不一樣的地方，我們通過它與頁面進行交互。

事件流

事件流描述的是從頁面中接收事件的順序。IE和網景團隊提出流相反的事件流概念。IE事件流是事件冒泡流，而網景是事件捕獲流。

事件冒泡

IE的事件流叫做事件冒泡，即事件開始由最具體的元素接收，然后逐級向上傳播到較為不具體的節點。




    
    Document


    
        點我點我

如果你單擊了div元素，那么click事件會按照如下事件傳播

document
點擊元素會從最具體的元素向上傳播。所有現代瀏覽器都支持事件冒泡，但是具體實現還是有些差別，IE5.5及更早版本的事件會跳過元素。

事件捕獲

網景公司提出的另一個事件流叫做事件捕獲，事件捕獲的思想上不太具體的節點應該更早接收到事件，而最具體的元素應該最后接收到事件，事件捕獲的目的的事件到達預期目標之前捕獲它。之前的例子來說就是

document
html
body
div

由于老版的瀏覽器不支持事件捕獲，所以我們一般使用的都是事件冒泡。

DOM事件流

DOM2級規定的事件流包含三個階段，事件捕獲階段、處于目標階段和事件冒泡階段。

事件處理程序

事件就是用戶或瀏覽器自身執行的某種動作，click、load、mouseover，都是事件的名字。而響應某個事件的函數就叫做事件處理程序，click的事件處理程序就是onclick,load事件處理程序就是onload。

HTML事件處理程序

在HTML中指定事件處理程序有兩個缺點，一是存在時間差，如果頁面已經出現了HTML元素，但是js還沒加載完，這時候就會報錯。還有就是會造成js代碼與HTML代碼耦合。

DOM0級事件處理程序

通過js指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。這種為事件處理程序賦值的方法是在第四代web瀏覽器中出現的，現在瀏覽器還支持這種操作。
使用DOM0級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運行；程序中的this指向當前元素。

var btn = document.getElementById("mybtn");
btn.onclick = function () {
    alert(this.id);    //mybtn
}

DOM0級添加的事件處理程序會在事件流的冒泡階段被處理。
也可以通過刪除DOM0級方法指定的事件處理程序，只要像下面這樣將事件事件處理程序屬性設置為null就可以了。
將事件處理程序設置為null之后，再單擊按鈕將不會有任何動作發生。

DOM2級事件處理程序

“DOM2級事件”定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和 removeEventListener()。所有DOM節點都包含這兩個方法，并且它們都接收三個參數，要處理的事件名、事件處理函數、一個布爾值。最后一個參數如果是true，表示在捕獲階段處理程序，如果是false，表示在捕獲階段處理程序。
與DOM0級方法一樣，這里的this指向是添加處理事件的元素中執行，使用DOM2級可以為元素添加多個事件處理程序，順序按添加事件的順序執行。通過addEventListener添加的事件處理程序只能通過removeEventListener移除，移除傳入的參數必須與添加時的參數相同，這就以為添加的匿名函數無法移除。

IE中事件處理程序

IE實現了兩個方法:attachEvent和detachEvent。這兩個方法，通過attachEvent添加的事件處理程序都會被添加到冒泡階段，注意attachEvent第一個參數是onclick,而非addEventListener方法中的click。在IE中使用attachEvent的this指向的是全局作用域。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
    console.log(this === window); // true
})

同樣的可以添加多個事件，不過事件的執行順序是相反的。
我們可以封裝跨瀏覽器處理程序。

var EventUtil = {

        addHandler: function (ele, type, handler) {
            if (ele.addEventListener) {
                ele.addEventListener(type, handler, false)
            } else if (ele.attachEvent) {
                ele.attachEvent(`on${type}`, handler)
            } else {
                ele[`on${type}`] = handler
            }
        },
        removeHandler: function (ele, type, handler) {
            if (ele.removeEventListener) {
                ele.removeEventListener(type, handler, false)
            } else if (ele.detachEvent) {
                ele.detachEvent(`on${type}`, handler)
            } else {
                ele[`on${type}`] = null
            }
        },
    }

DOM中的事件對象

無論指定事件處理程序時用的什么方法，都會傳入一個event對象。事件處理程序內部，對象this的值等于currentTarget的值，而target只包含事件的實際目標，如果直接將事件處理程序指定給了目標元素，this、currentTarget和target包含相同的值。

var bth = document.getElementById("myBth");

bth.onclick = function (e) {
    console.log(e.currentTarget === this); // true
    console.log(e.target === this); // true
}

可以通過e.preventDefault()阻止事件的默認行為，cancelable為true的事件才可以阻止。
stopPropagation()用于立即停止事件在DOM中的傳播，取消進一步的事件捕獲或冒泡。

var btn = document.getElementById("myBtn");

btn.onclick = function (e) {
    e.stopPropagation();
}

document.body.onclick = function (e) {
    //不執行
}

可以用eventPhase來確定事件處于哪個事件流階段。
1：捕獲
2：事件目標對象
3：冒泡
只有在事件處理程序執行期間，event對象才會存在，執行完成后，對象就會被銷毀。

IE中的事件對象

在使用DOM0級方法添加事件處理程序時，event 對象做為window對象的一個屬性存在。

var btn = document.getElementById("myBtn");
btn.onclick = function () {
    var event = window.event;
    console.log(event.type)
}

var btn = document.getElementById("myBtn");
btn.onclick = function () {
    var event = window.event;
    console.log(event.srcElement === this)  //true
    //event.srcElement 相當于DOM中的target
}

var btn = document.getElementById("myBtn");
btn.attachEvent = function (event) {
    console.log(event.srcElement === this)  //false
    //this是window
}

returnValue屬性相當于preventDefault,cancelBubble屬性stopPropagation()方法類型，不過其只能阻止冒泡，因為低版本IE只支持冒泡。

跨瀏覽器的事件對象

var EventUtil = {
    addHandler: function (ele, type, handler) {

    },
    getEvent: function (event) {
        return event ? event : window.event
    },
    getTarget: function (event) {
        return event || event.srcElement
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault()
        } else {
            event.returnValue = false
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation()
        } else {
            event.cancelBubble = true
        }
    }
}

云服務器 GPU云服務器 js事件詳解 js原生動畫詳解 js的event詳解 js 事件分發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112145.html

【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
JS基礎篇--JS之onunload、onbeforeunload事件詳解

摘要：事件事件在用戶退出頁面時發生。注意事件同樣觸發了頁面載入事件事件。如圖所示大體一句話描述和支持事件但是或者不支持該事件。瀏覽器兼容情況完美支持不支持文字提醒信息不支持如圖所示使用遇到的凡是標簽都會觸發事件包括這種。簡介 onunload，onbeforeunload都是在刷新或關閉時調用，可以在腳本中通過 window.onunload來調用。區別在于onbeforeunload在o...

rollback 2019-08-21 17:26 評論0 收藏0
js事件委托詳解

摘要：先說事件流的事件流分為個階段捕獲目標冒泡。如果是每個都去單獨綁定事件明顯不科學，畢竟去拿列表也是畢竟消耗性能的，同時每個事件綁定的回調函數也會占用大量的內存。那如果有動態插入的元素呢于是委托就可以用上了。先說事件流 js的事件流分為3個階段：捕獲、目標、冒泡。即事件來了，先從上到下傳播（捕獲），到達目標節點（目標），然后在往上傳播（冒泡）。看下圖： showImg(https://s...

Sleepy 2019-08-01 18:39 評論0 收藏0
js事件委托詳解

摘要：先說事件流的事件流分為個階段捕獲目標冒泡。如果是每個都去單獨綁定事件明顯不科學，畢竟去拿列表也是畢竟消耗性能的，同時每個事件綁定的回調函數也會占用大量的內存。那如果有動態插入的元素呢于是委托就可以用上了。先說事件流 js的事件流分為3個階段：捕獲、目標、冒泡。即事件來了，先從上到下傳播（捕獲），到達目標節點（目標），然后在往上傳播（冒泡）。看下圖： showImg(https://s...

GeekQiaQia 2019-08-22 14:56 評論0 收藏0
js事件詳解一

摘要：所有節點中都包含這兩個方法，并且它們都接受個參數要處理的事件名作為事件處理程序的函數和一個布爾值。最后這個布爾值如果是，表示在捕獲階段調用事件處理程序如果是，表示在冒泡階段調用事件處理程序。事件處理的方法： 1、直接在html中編寫例如：但是這樣處理的事件存在兩個缺點，一個是時間差問題，一個是不同瀏覽器對標識符的解析有差異，很可能會在訪問非限定對...

TerryCai 2019-08-21 10:37 評論0 收藏0