js事件流、事件委托與事件階段的示例分析

這篇文章主要介紹了js事件流、事件委托與事件階段的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1、事件流

HTML 中與 javascript 交互是通過事件驅(qū)動(dòng)來實(shí)現(xiàn)的，例如鼠標(biāo)點(diǎn)擊事件 onclick、頁面的滾動(dòng)事件 onscroll 等等，可以向文檔或者文檔中的元素添加事件偵聽器來預(yù)訂事件。想要知道這些事件是在什么時(shí)候進(jìn)行調(diào)用的，就需要了解一下“事件流”的概念。

事件流描述的是從頁面中接收事件的順序,DOM2 級事件流包括下面幾個(gè)階段。事件捕獲階段、處于目標(biāo)階段、事件冒泡階段

（1）事件捕獲的意思是最不具體的節(jié)點(diǎn)應(yīng)該最先收到事件，而最具體的節(jié)點(diǎn)應(yīng)該最后收到事件。比如點(diǎn)擊頁面的一個(gè)div觸發(fā)的元素順序分別是document、html、body、div。可以在該階段攔截事件發(fā)生

（2）處于目標(biāo)階段即捕獲到實(shí)際的目標(biāo)元素階段，

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

2、事件處理程序

事件處理程序指為響應(yīng)點(diǎn)擊，加載，鼠標(biāo)等操作而調(diào)用的函數(shù)。有很多方式指定事件處理程序。

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

<input type="button" value="點(diǎn)我" onclick="console.log('我被點(diǎn)擊了')">

b、DOM0 事件處理程序，通過js獲取操作對象元素，并指定事件處理程序

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

c、DOM2 事件處理程序

addEventListener 和 removeEventListener() 是 DOM2 級事件新增的指定事件處理程序的操作，addEventListener方法都接收 3 個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是 false，表示在冒泡階段調(diào)用事件處理程序。IE 只支持事件冒泡。通過 addEventListener() 添加的事件處理程序只能使用 removeEventListener() 并傳入與添加時(shí)同樣的參數(shù)來移除。

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

d、IE 事件處理程序

IE 實(shí)現(xiàn)了與 DOM 類似的方法，即 attachEvent() 和 detachEvent() 。這兩個(gè)方法接收兩個(gè)同樣的參數(shù)：事件處理程序的名字和事件處理函數(shù)。

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

在 IE中使用 attachEvent() 與使用 DOM0方式的主要區(qū)別是事件處理程序的作用域。使用 DOM0方式時(shí)，事件處理程序中的 this 值等于目標(biāo)元素。而使用 attachEvent() 時(shí),事件處理程序是在全局作用域中運(yùn)行的，因此 this 等window。

使用 attachEvent() 添加的事件處理程序?qū)⑹褂?detachEvent() 來移除，只要提供相同的參數(shù)。

3、事件對象

a、DOM事件對象event

在 DOM 合規(guī)的瀏覽器中， event 對象是傳給事件處理程序的唯一參數(shù)。

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

打印如下：

b、IE 事件對象

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

如果通過DOM方式添加事件處理程序，則event 對象只是 window 對象的一個(gè)屬性

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

如果通過IE事件處理程序，則 event對象會(huì)作為唯一的參數(shù)傳給處理函數(shù)

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

4、跨瀏覽器事件處理

// 包含兼容性處理的事件處理函數(shù)
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
        }
    },
    //獲取事件目標(biāo)元素
    getTarget:function(event){
        return event.target||event.srcElement
    },
    //獲取event對象的引用，取到事件的所有信息，確保隨時(shí)使用event
    getEvent:function(event){
        return event||window.event
    },
    //阻止事件（主要是事件冒泡，因?yàn)閕e不支持事件捕獲）
    stopPropagation:function(event){
        if (event.stopPropagation) {
            event.stopPropagation()
        } else {
            event.cancelBubble=true
        }
    },
    //取消事件的默認(rèn)行為（主要ie事件對象設(shè)置returnValue為false可以取消事件默認(rèn)行為）
    preventDefault:function(event){
        if (event.preventDefault) {
            event.preventDefault()
        } else {
            event.returnValue=false
        }
    }
}

5、事件委托

簡介：事件委托指的是，不在事件的發(fā)生地（直接 dom）上設(shè)置監(jiān)聽函數(shù)，而是在其父元素上設(shè)置監(jiān)聽函數(shù)，通過事件冒泡，父元素可以監(jiān)聽到子元素上事件的觸發(fā)，通過判斷事件發(fā)生元素 DOM 的類型，來做出不同的響應(yīng)。

舉例：最經(jīng)典的就是 ul 和 li 標(biāo)簽的事件監(jiān)聽，比如我們在添加事件時(shí)候，采用事件委托機(jī)制，不會(huì)在 li 標(biāo)簽上直接添加，而是在ul 父元素上添加。因?yàn)樗械膌i標(biāo)簽都是ul標(biāo)簽的后代，在li標(biāo)簽上觸發(fā)事件時(shí)，會(huì)進(jìn)行事件冒泡，必定在ul標(biāo)簽上接收到觸發(fā)事件處理程序，通過事件對象可以判斷具體是哪個(gè)li標(biāo)簽觸發(fā)的，這樣就省去了重復(fù)獲取元素的代碼。

好處：比較合適動(dòng)態(tài)元素的綁定，新添加的子元素也會(huì)有監(jiān)聽函數(shù)，也可以有事件觸發(fā)機(jī)制。減少整個(gè)頁面所需的內(nèi)存，提升整體性能

事件委托的實(shí)現(xiàn)

我們可以給HTMLElement對象綁定該方法delegate

HTMLElement.prototype.delegate = function(type,selector,fn){
    this.addEventListener(type,function(e){
		var target = e.target,
			bubble = true;

		while(bubble && target !== this){
			if (filter(this,selector,target)) {
				bubble = fn.call(target,e);
			}

			target = target.parentNode;

			return bubble;
		}
		
    });

    function filter(agent,selector,target){
	var nodes = agent.querySelectorAll(selector);
	
	for (var i = 0; i < nodes.length; i++) {
		if (nodes[i] == target) return true;
	}

	return false;
    }
}

document.body.delegate('click','.parentNode li',function(e){
	console.log(e.target);
});

實(shí)際情況下，有些事件 blur，change，focus 等事件，是不支持事件冒泡的。這里并沒有做判斷。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js事件流、事件委托與事件階段的示例分析”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!