Javascript 中怎么實(shí)現事件流和事件委托

今天就跟大家聊聊有關(guān)Javascript 中怎么實(shí)現事件流和事件委托，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

javascript 事件流和事件委托

javascript和HTML之間的交互是通過(guò)事件實(shí)現的。

事件就是用戶(hù)或瀏覽器自身執行的某種動(dòng)作，比如點(diǎn)擊、加載，鼠標移入移出等等。

DOM事件流

DOM(文檔對象模型)結構是一個(gè)樹(shù)形結構，當一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí)，該事件會(huì )在元素結點(diǎn)與根節點(diǎn)之間按特定的順序傳播，路徑所經(jīng)過(guò)的節點(diǎn)都會(huì )收到該事件，這個(gè)傳播過(guò)程可稱(chēng)為DOM事件流。

事件流描述的是從頁(yè)面中接收事件的順序。

事件冒泡：IE的事件流叫 事件冒泡，即事件開(kāi)始時(shí)由最具體的元素接收，然后逐級向上傳播到較為不具體的節點(diǎn)。自下而上。

事件捕獲：是不太具體的節點(diǎn)先接收到事件，而最具體的節點(diǎn)應該最后接收到事件。自上而下。

DOM事件流：包括三個(gè)階段：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術(shù)社區

2. 事件捕獲階段：該階段的主要作用是捕獲截取事件

3. 處于目標階段：一般地，該階段具有雙重范圍，即捕獲階段的結束，冒泡階段的開(kāi)始;

4. 事件冒泡階段：主要作用是將目標元素綁定事件執行的結果返回給瀏覽器，處理不同瀏覽器之間的差異，主要在該階段完成

DOM事件流

事件對象 

在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì )產(chǎn)生一個(gè)事件對象event，該對象包含所有與事件有關(guān)的信息。

var btn = document.getElementById("juejin") btn.onclick = function(event){   console.log(event)  }

• 常用屬性：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術(shù)社區

2. target 事件的目標

3. currentTarget 綁定事件的元素，與 'this' 的指向相同

4. stopPropagation() 取消事件的進(jìn)一步捕獲或冒泡。如果bubbles為true，則可以使用這個(gè)方法

5. stopImmediatePropagation() 取消事件的進(jìn)一步捕獲或冒泡，同時(shí)阻止任何事件處理程序被調用(DOM3級事件中新增)

6. preventDefault() 取消事件的默認行為，比如點(diǎn)擊鏈接跳轉。如果 cancelable 是 true，則可以使用這個(gè)方法

7. type 被觸發(fā)的事件類(lèi)型

8. eventPhase 調用事件處理程序的階段：0表示這個(gè)時(shí)間沒(méi)有事件正在被處理，1表示捕獲階段，2表示“處于目標”，3表示冒泡階段

document.body.onclick = function(event){     alert(event.currentTarget === document.body); //true     alert(this === document.body); //true     alert(event.target === document.getElementById("myBtn")); //true };

事件類(lèi)型

1.UI (User Interface) 事件，當用戶(hù)與頁(yè)面上的元素交互時(shí)觸發(fā)

• load、unload、error、select、resize、scroll

2.焦點(diǎn)事件，在頁(yè)面獲得或失去焦點(diǎn)時(shí)觸發(fā)

• blur、focusout 失去焦點(diǎn)

• focus、focusin 獲得焦點(diǎn)

3.鼠標事件，用戶(hù)通過(guò)鼠標在頁(yè)面執行操作時(shí)觸發(fā)

• click、dbclick、mousedown、mouseup

• mouseenter、mouserleave

• mousemove

• mouseout、mouseover

點(diǎn)擊和雙擊事件觸發(fā)的順序如下

• mousedown

• mouseup

• click

• mousedown

• mouseup

• dbclick

4.滾輪事件，當使用鼠標滾輪操作時(shí)觸發(fā)

• mousewheel

5.文本事件，在文檔中輸入文本時(shí)觸發(fā)

• textInput 當用戶(hù)在可編輯區域中輸入字符時(shí)，就會(huì )觸發(fā)這個(gè)事件

6.鍵盤(pán)事件，當用戶(hù)通過(guò)鍵盤(pán)在頁(yè)面上執行操作時(shí)觸發(fā)

• keydown 按下鍵盤(pán)任意鍵時(shí)觸發(fā)，不松開(kāi)，則一直觸發(fā)

• keypress 按下鍵盤(pán)上的字符鍵時(shí)觸發(fā)，不松開(kāi)，則一直觸發(fā)

• Keyup 用戶(hù)釋放鍵盤(pán)上的建時(shí)觸發(fā)

7.HTML5事件

• contextmenu 事件：?jiǎn)蝺r(jià)鼠標右鍵可以調出上下文菜單

• beforeunload 事件：在瀏覽器卸載頁(yè)面之前觸發(fā)

• DOMContentLoad 事件：在形成完整的DOM樹(shù)之后就會(huì )觸發(fā)。

• readystatechange 事件：提供與文檔加載狀態(tài)有關(guān)的信息

• pageshow和pagehide 事件：頁(yè)面顯示和隱藏時(shí)觸發(fā) ?MDN傳送門(mén)

• hashchange 事件 : hash改變時(shí)觸發(fā)

事件委托

事件委托是為了解決事件處理程序過(guò)多造成的內存和性能問(wèn)題。那么什么是事件委托呢?

就是利用事件冒泡,只指定一個(gè)事件處理程序，就可以管理某一類(lèi)型的所有事件。

有什么作用?

• 支持為同一個(gè)DOM元素注冊多個(gè)同類(lèi)型事件

• 可將事件分為事件捕獲和事件冒泡

用addEventListener(type,listener,useCapture)實(shí)現

• type: 必須,String類(lèi)型,事件類(lèi)型

• listener: 必須,函數體或者JS方法

• useCapture: 可選,boolean類(lèi)型。指定事件是否發(fā)生在捕獲階段。默認為false,事件發(fā)生在冒泡階段

<div id="div1"></div>  window.onload = function(){     let div1 = document.getElementById('div1');     div1.addEventListener('click',function(){         console.log('打印第一次')     })     div1.addEventListener('click',function(){         console.log('打印第二次')     }) }

事件委托的優(yōu)點(diǎn)

• 可以大量節省內存占用，減少事件注冊

• 可以實(shí)現當新增子對象時(shí)無(wú)需再次對其綁定(動(dòng)態(tài)綁定事件)

使用事件委托注意事項

使用“事件委托”時(shí)，并不是說(shuō)把事件委托給的元素越靠近頂層就越好。

事件冒泡的過(guò)程也需要耗時(shí)，越靠近頂層，事件的”事件傳播鏈”越長(cháng)，也就越耗時(shí)。

如果DOM嵌套結構很深，事件冒泡通過(guò)大量祖先元素會(huì )導致性能損失。