Javascript 中怎么實現(xiàn)事件流和事件委托

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

javascript 事件流和事件委托

javascript和HTML之間的交互是通過事件實現(xiàn)的。

事件就是用戶或瀏覽器自身執(zhí)行的某種動作，比如點(diǎn)擊、加載，鼠標(biāo)移入移出等等。

DOM事件流

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

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

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

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

DOM事件流：包括三個階段：

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

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

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

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

DOM事件流

事件對象 

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

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

• 常用屬性：

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

2. target 事件的目標(biāo)

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

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

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

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

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

8. eventPhase 調(diào)用事件處理程序的階段：0表示這個時間沒有事件正在被處理，1表示捕獲階段，2表示“處于目標(biāo)”，3表示冒泡階段

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

事件類型

1.UI (User Interface) 事件，當(dāng)用戶與頁面上的元素交互時觸發(fā)

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

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

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

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

3.鼠標(biāo)事件，用戶通過鼠標(biāo)在頁面執(zhí)行操作時觸發(fā)

• click、dbclick、mousedown、mouseup

• mouseenter、mouserleave

• mousemove

• mouseout、mouseover

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

• mousedown

• mouseup

• click

• mousedown

• mouseup

• dbclick

4.滾輪事件，當(dāng)使用鼠標(biāo)滾輪操作時觸發(fā)

• mousewheel

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

• textInput 當(dāng)用戶在可編輯區(qū)域中輸入字符時，就會觸發(fā)這個事件

6.鍵盤事件，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)

• keydown 按下鍵盤任意鍵時觸發(fā)，不松開，則一直觸發(fā)

• keypress 按下鍵盤上的字符鍵時觸發(fā)，不松開，則一直觸發(fā)

• Keyup 用戶釋放鍵盤上的建時觸發(fā)

7.HTML5事件

• contextmenu 事件：單價鼠標(biāo)右鍵可以調(diào)出上下文菜單

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

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

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

• pageshow和pagehide 事件：頁面顯示和隱藏時觸發(fā) ?MDN傳送門

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

事件委托

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

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

有什么作用?

• 支持為同一個DOM元素注冊多個同類型事件

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

用addEventListener(type,listener,useCapture)實現(xiàn)

• type: 必須,String類型,事件類型

• listener: 必須,函數(shù)體或者JS方法

• useCapture: 可選,boolean類型。指定事件是否發(fā)生在捕獲階段。默認(rèn)為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)

• 可以大量節(jié)省內(nèi)存占用，減少事件注冊

• 可以實現(xiàn)當(dāng)新增子對象時無需再次對其綁定(動態(tài)綁定事件)

使用事件委托注意事項

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

事件冒泡的過程也需要耗時，越靠近頂層，事件的”事件傳播鏈”越長，也就越耗時。

如果DOM嵌套結(jié)構(gòu)很深，事件冒泡通過大量祖先元素會導(dǎo)致性能損失。

看完上述內(nèi)容，你們對Javascript 中怎么實現(xiàn)事件流和事件委托有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。