關(guān)于javascript事件機(jī)制的理解及事件監(jiān)聽的封裝

lykops 發(fā)布于2019-08-20 16:54 / 3085人閱讀

摘要：說到事件機(jī)制首先要說一下事件模型原始事件模型在原始事件模型中，事件是不會傳播，只是觸發(fā)立即執(zhí)行，函數(shù)會作為元素的屬性被監(jiān)聽。標(biāo)準(zhǔn)函數(shù)綁定其中是否綁定在捕獲階段，表示采取捕獲方式，表示采取冒泡方式。

說到事件機(jī)制首先要說一下事件模型

1.原始事件模型

 在原始事件模型中，事件是不會傳播，只是觸發(fā)立即執(zhí)行，函數(shù)會作為元素的屬性被監(jiān)聽。
 這種方式和這種方式document.querySelector(".box");
 這種時(shí)間模型有著明顯的缺點(diǎn)：同一事件無法綁定多個(gè)，無法傳播不能應(yīng)用事件委托.

2.DOM2模型即2級DOM事件模型

w3c規(guī)定的標(biāo)準(zhǔn)事件模型，高版本瀏覽器基本遵循著一標(biāo)準(zhǔn)（gtmd ie）
事件模型中一次事件包含3個(gè)過程

事件捕獲階段：事件被從document一直向下傳播到目標(biāo)元素,在這過程中依次檢查經(jīng)過的節(jié)點(diǎn)是否注冊了該事件的監(jiān)聽函數(shù)，若有則執(zhí)行。
（什么捕獲，神奇的ie我是不知道，你說什么反正我是聽不到的，哥是最屌的，gtmd ie）ie低版本沒有捕獲

事件處理階段：事件到達(dá)目標(biāo)元素,執(zhí)行目標(biāo)元素的事件處理函數(shù).

事件冒泡階段：事件從目標(biāo)元素上升一直到達(dá)document，同樣依次檢查經(jīng)過的節(jié)點(diǎn)是否注冊了該事件的監(jiān)聽函數(shù)，有則執(zhí)行。

w3c標(biāo)準(zhǔn)函數(shù)綁定 function addEventListener(string eventFlag, function eventFunc,
useCapture)
其中useCapture是否綁定在捕獲階段，true表示采取捕獲方式，false表示采取冒泡方式。

    
    
    


    
        
    

節(jié)點(diǎn)既綁定了冒泡事件也綁定了捕獲事件，此時(shí)的執(zhí)行順序按照綁定的先后順序執(zhí)行。

因?yàn)閕e用自有的attachEvent函數(shù)綁定，所以監(jiān)聽的時(shí)候需要做兼容，為了方便封裝一下吧。

        if (element.addEventListener) {
            element.addEventListener(type, fun, false);
        }
        else if(element.attachEvent){
            element.attachEvent("on" + type, fun);
        }
        else{
            element["on" + type] = fun;
        }
    }```

最近看了惰性函數(shù)的相關(guān)，同一個(gè)應(yīng)用環(huán)境中，其實(shí)只需要檢測一次即可。

            if (element.addEventListener) {
                addEvent = function (type, element, fun) {
                    element.addEventListener(type, fun, false);
                }
            }
            else if(element.attachEvent){
                addEvent = function (type, element, fun) {
                    element.attachEvent("on" + type, fun);
                }
            }
            else{
                addEvent = function (type, element, fun) {
                    element["on" + type] = fun;
                }
            }
        }```
  第一次調(diào)用addEvent對瀏覽器做能力檢測，然后重寫addEvent。下次再調(diào)用的時(shí)候函數(shù)被重寫，不會再做檢測。