參考：https://zhuanlan.zhihu.com/p/23059366

一、事件的監(jiān)聽

事件監(jiān)聽的三種方式：

1、html內(nèi)聯(lián)屬性：<button οnclick="btnClick"></button>

2、DOM屬性綁定：document.getElementById("btn").onclick = function () {}

3、事件監(jiān)聽函數(shù)：document.getElementById("btn").addEventListener("click", ()=>{}, false)

function addEventHandler(obj, eventName, handler) {if (document.addEventListener) {obj.addEventListener(eventName, handler, false);}else if (document.attachEvent) {obj.attachEvent("on" + eventName, handler);} else {obj["on" + eventName] = handler;} }

二、事件移除

1、document.getElementById("btn").removeEventListener("click", ()=>{}, false)

2、document.getElementById("btn").detachEvent("onclick")

3、document.getElementById("btn").onclick = null

function removeEventHandler(obj, eventName, handler) {if (document.removeEventListener) {obj.removeEventListener(eventName, handler, false);}else if (document.detachEvent) {obj.detachEvent("on" + eventName, handler);}else {obj["on" + eventName] = null;} }

三、事件觸發(fā)過程

事件觸發(fā)過程分三個(gè)階段：捕獲階段、目標(biāo)階段、冒泡階段

?

1、捕獲階段：用戶對 DOM 元素進(jìn)行操作，從 Window 依次經(jīng)過 docuemnt、html、body等，到達(dá)目標(biāo)元素父節(jié)點(diǎn)的過程稱為捕獲階段，注意此時(shí)還未到達(dá)目標(biāo)節(jié)點(diǎn)。

2、目標(biāo)階段：捕獲階段結(jié)束，事件到達(dá)目標(biāo)元素并觸發(fā)事件的過程是目標(biāo)階段

3、冒泡階段：目標(biāo)元素觸發(fā)事件結(jié)束后，向父元素逐級(jí)返回的過程

四、事件委托

事件委托是指，某元素的事件自己不處理，而是借助事件冒泡原理交由目標(biāo)元素的父級(jí)或祖級(jí)元素處理的機(jī)制。例如，li列表事件可以綁定到ul，radio列表事件可以綁定在父級(jí)元素

1、為什么要事件委托

減少時(shí)間綁定，提升性能（事件綁定會(huì)占用內(nèi)存）

動(dòng)態(tài)監(jiān)聽，避免增加或刪除元素導(dǎo)致的事件綁定

2、流程

事件到達(dá)目標(biāo)元素后，冒泡返回，被已綁定事件的父級(jí)或祖級(jí)元素響應(yīng)執(zhí)行。其中，事件對象中的 target 屬性記錄實(shí)際觸發(fā)本次事件的元素

五、阻止事件冒泡

在不希望事件冒泡的時(shí)候可以阻止該機(jī)制

function preventBubble(e) {if (!e) {const e = window.event;}e.cancelBubble = true;if (e.stopPropagation) {e.stopPropagation();} }

轉(zhuǎn)載于:https://www.cnblogs.com/zs-note/p/9633131.html

總結(jié)

以上是生活随笔為你收集整理的浏览器工作原理（四）：浏览器事件解读的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。