javascript的事件

ZweiZhao 發(fā)布于2019-08-20 15:37 / 1887人閱讀

摘要：所謂事件呢，就是可以被偵測(cè)到的行為。事件傳播的順序?qū)?yīng)瀏覽器的兩種事件流模型捕獲型事件流和冒泡型事件流。

去年一直在學(xué)習(xí)框架的東西，比如VueJs,angularJs的東西，但感覺(jué)自己的基礎(chǔ)知識(shí)還是很匱乏，因此想著該重新回歸本質(zhì)，多看看原生javascrip的東西，現(xiàn)在返回去學(xué)一些東西，感覺(jué)很多都豁然開(kāi)朗的感覺(jué)。

所謂事件呢，就是可以被 JavaScript 偵測(cè)到的行為。而具體的事件有哪些呢

鼠標(biāo)事件

鍵盤事件

window事件

media事件

form事件

當(dāng)觸發(fā)事件時(shí)，就需要去處理他，而使用事件處理模型有三種

html事件處理模型----定義：將事件直接綁定到html標(biāo)簽上----缺點(diǎn)：html和javascript耦合，無(wú)法處理多個(gè)事件程序

. DOM0級(jí)事件處理模型----定義:函數(shù)賦值給事件處理程序的方法

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

 btn.onclick=function(){

 console.log("這是通過(guò)DOM 2級(jí)處理程序")

};

. DOM 2級(jí)事件處理程序----通過(guò)addEventListener 和 removeEventListener,這兩個(gè)函數(shù)的參數(shù)要一致

function showMsg(){
console.log("msg")
}
btn.addEventListener("click", showMsg, false)
btn.removeEventListener("click", showMsg, false)

IE事件處理
IE8以下的版本不支持addEventListener
因此需要用attachEvent 添加事件處理程序

       detachEvent 刪除事件處理程序

而事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按照特定的順序傳播，路徑所經(jīng)過(guò)的所有節(jié)點(diǎn)都會(huì)收到該事件，這個(gè)傳播過(guò)程即DOM事件流。

事件傳播的順序?qū)?yīng)瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。

事件捕獲：不太具體的DOM節(jié)點(diǎn)，具體節(jié)點(diǎn)接收到事件

事件冒泡：由具體的DOM節(jié)點(diǎn)逐級(jí)向上傳遞至最不具體的節(jié)點(diǎn)

網(wǎng)上的圖片更形象的表明了

當(dāng)我們點(diǎn)擊son的時(shí)候，控制臺(tái)會(huì)先后打出

som msg
father msg

可是我們只想顯示son msg，應(yīng)該怎么處理呢，接著往下看

DOM中的事件對(duì)象

在觸發(fā)DOM上的事件時(shí)都會(huì)產(chǎn)生一個(gè)對(duì)象 
DOM中的 event事件對(duì)象
     type:事件類型，
     target:獲取事件目標(biāo)元素
     stopPropagation:方法 阻止事件冒泡
     preventDefault 方法 阻止事件的默認(rèn)行為
IE中的事件對(duì)象
    type:事件類型
    srcElement 屬性 獲取事件目標(biāo)元素
    cancleBubble 屬性
    returnValue 屬性 設(shè)置為true

通過(guò)以上知識(shí)，我們可以封裝一個(gè)跨瀏覽器的事件對(duì)象

    var eventObj= {
         /**
         * 添加事件 
         * element 元素
         * 事件類型
         * 事件處理
         **/
        addEventHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler)
            } else {
                element["on" + type] = handler;
            }
        },
        /**
        * 移除事件
        * element 元素
        * 事件類型
        * 事件處理
        **/
        removeEventHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler)
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler)
            } else {
                element["on" + type] = null;
            }
        },
        /**
        *獲取事件
        **/
        getEvent: function (e) {
            return e ? e : window.event;
        },
        /**
        * 阻止默認(rèn)行為
        **/
        preventDefault: function (e) {
            if (e.preventDefault) {
                e.preventDefault()
            } else {
                e.returnValue = false;
            }
        },
        getElement: function (e) {
            return e.target || e.srcElement;
        },
        /** 
        * 阻止事件冒泡
        **/
        stopPropagation: function (e) {
            if (e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true;
            }

        }
    };
    eventUtil.addHandler(btn2, "click", showMessage);