在網(wǎng)頁端、移動端H5、小程序等各個終端環(huán)境的前端開發(fā)中隨處可見事件的運用,可見事件機制的是前端這一塊的重中之重。經(jīng)過我研讀了大量博客文章以及開源框架源碼后,這次算是對DOM事件機制有了更新更全面的的認識。
下文主要通過一個例子帶你 分析DOM事件的傳遞、事件處理 ,然后在此基礎上再 深入總結(jié)對事件監(jiān)聽的優(yōu)化方案 ,最終總結(jié)下DOM事件機制 在開源框架中的實戰(zhàn)應用 。
以下面這個普通的html文件為例
<!DOCTYPE html> <html lang="en" onclick="handleClickHtml()"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body onclick="handleBodyClick()"> <div id="div1" onclick="handleClick2()"> <button id="button1" onclick="handleClick1()">handleClick1</button> </div> <script> function handleClick1(e) { console.log('click1') } function handleClick2(e) { console.log('click2') } function handleBodyClick(e) { console.log('body clicked') } function handleClickHtml(e) { console.log('html clicked') } document.addEventListener('click', e => { console.log('document clicked') }) </script> </body> </html> 復制代碼
例子中給 document、html、body、div、button 都添加了點擊事件,其執(zhí)行結(jié)果如下:
由鼠標、鍵盤、觸摸屏、窗口縮放、圖片加載、節(jié)點焦點變化等觸發(fā)事件,每個觸發(fā)的事件都有一個target——事件目標,根據(jù)target往html根節(jié)點遍歷就可以確定節(jié)點嵌套層級關(guān)系,從而確定此事件的傳遞路徑。
事件傳遞路徑由瀏覽器、webview來確定
一個事件來回走兩遍是便于事件響應時機的控制(下文的事件冒泡與事件捕獲的應用中有體現(xiàn)),同時也存在事件冒泡的瀏覽器歷史原因(與IE、Netscape有關(guān),不贅述)。
事件在從自上而下的傳遞過程中會 判斷當前node節(jié)點是否綁定對應事件的監(jiān)聽器 ,若有則執(zhí)行響應監(jiān)聽器的事件處理程序(也就是綁定的事件要執(zhí)行的邏輯),這里的執(zhí)行就是所謂的事件響應。
事件的響應過于與事件的類型是捕獲事件、冒泡事件有關(guān),同時是否組件冒泡還會影響該事件的后續(xù)傳遞過程,具體執(zhí)行流程總結(jié)成如下圖所示:
根據(jù)事件傳遞中的兩種傳遞路徑分別分為: 由上至下——事件捕獲階段,由下至上——事件冒泡階段 ,指的是一個事件由window(上圖并未標出window)到target之間的傳遞的過程。
可以通過組織事件冒泡讓事件不再繼續(xù)完成由下至上的過程,這會讓target的父節(jié)點綁定冒泡階段的事件監(jiān)聽器不響應事件。
可以通過指定事件在捕獲階段執(zhí)行。
看下面這個例子,可以通過 stopPropagation 來阻止事件繼續(xù)往上冒泡, window、document、html 上添加的點擊事件均不會生效
<!-- 省略了部分代碼 --> <div id="div1"> <button id="button1">button</button> </div> <script> var div1 = document.getElementById('div1') var button1 = document.getElementById('button1') div1.addEventListener('click', (e) => { console.log(e.currentTarget) }, false) button1.addEventListener('click', (e) => { console.log(e.currentTarget) e.stopPropagation() // 關(guān)鍵代碼:組織了click事件繼續(xù)往上冒泡 }, false) 復制代碼
// 以下是監(jiān)聽html、document的點擊事件 function handleClickHtml(e) { console.log('html clicked') } document.addEventListener('click', e => { console.log('document clicked') }) </script> 復制代碼
點擊button的打印結(jié)果如下:
addEventListener需要用attachEvent進行兼容性處理,第三個參數(shù)默認值為false表示在事件冒泡階段響應事件
還是上面這個例子,只更改div1部分的事件監(jiān)聽,的第三個參數(shù)為true來開啟事件捕獲
<!-- 省略了部分代碼 --> <div id="div1"> <button id="button1">button</button> </div> <script> var div1 = document.getElementById('div1') var button1 = document.getElementById('button1') div1.addEventListener('click', (e) => { console.log(e.currentTarget) }, true) // true:表示div1在事件的捕獲階段響應事件 button1.addEventListener('click', (e) => { console.log(e.currentTarget) e.stopPropagation() // 組織事件冒泡 }, false) 復制代碼
// 以下是監(jiān)聽html、document的點擊事件 function handleClickHtml(e) { console.log('html clicked') } document.addEventListener('click', e => { console.log('document clicked') }) </script> 復制代碼
點擊button的打印結(jié)果如下:
依次執(zhí)行了div1和button1綁定的點擊事件,注意這里兩者的 執(zhí)行順序 很關(guān)鍵。事件在捕獲階段遇到div1節(jié)點時執(zhí)行打印,然后在button處(處于目標階段)執(zhí)行打印,然后事件被阻止冒泡不再往上傳遞。
考慮以下場景:
有個一個長消息列表實時接受新的消息,滾動到底部時加載更多消息,點擊消息可進入回話窗口頁面,消息左滑消息此條消息
問題:
抽象來看這個問題就是如何高效的給大批量(甚至是無限量)節(jié)點添加事件,這里暫時不考慮vue、react等框架
每注冊一個事件監(jiān)聽監(jiān)聽都需要使用一定內(nèi)存,同時在dom節(jié)點多了之后事件經(jīng)過的捕獲、冒泡階段要處理事件傳遞也就慢了
父節(jié)點嵌套的子節(jié)點的觸發(fā)的事件會通過事件冒泡到達父節(jié)點,事件處理程序不直接綁定到子節(jié)點,統(tǒng)一由公共父節(jié)點進行事件監(jiān)聽。
e.target表示觸發(fā)事件的元素,通過e.target可以判斷具體響應那個元素的事件 e.currentTarget表示事件綁定的元素,在事件委托情況下指向同一個元素
<!-- 省略了部分代碼 --> <div id="div1"> <button id="button1">button</button> </div> <script> document.addEventListener('click', e => { // e.target:觸發(fā)事件的元素 // e.currentTarget:事件監(jiān)聽器綁定的元素 // console.log(e.target, e.currentTarget) if (e.target.id === 'button1') { return console.log('button1 clicked') } if (e.target.id === 'div1') { return console.log('div1 clicked') } if (e.target.tagName === 'HTML') { return console.log('html clicked') } if (e.target.tagName === 'BODY') { return cosnole.log('body clicked') } }) </script> 復制代碼
依次點擊 html、div1、button1 會依次打印結(jié)果:
上面事件委托可以解決大批量節(jié)點事件監(jiān)聽的性能問題,但是DOM節(jié)點量過大導致界面滾動不流暢的問題沒解決。
虛擬滾動是指在列表滾動事件中動態(tài)計算出當前窗口中能夠顯示的列表節(jié)點,其前后窗口不顯示的節(jié)點各用一個div進行占位處理,并調(diào)整占位div的樣式確模擬的列表樣式與原始列表無異處。
虛擬滾動已經(jīng)是一個完美解決長列表渲染性能的方案,針對react、vue均有對應庫實現(xiàn),此處不再贅述
事件委托也叫事件代理,在react中的合成事件則是完全采用了事件代理
基于react16的 ant-design-pro 項目的事件綁定截圖如下:
直接通過onClick綁定的事件通過react處理最終會統(tǒng)一綁定到document上,正是使用的事件委托。
最新版微信小程序中綁定事件有兩種類型: bind:methodName、catch:methodName、mut-bind:methodName、mut-catch:methodName ,其中區(qū)別最大的是前兩者。
methodName表示移動端事件名,例如:tap、touchmove等
bind:methodName 采用冒泡綁定事件, catch:methodName **采用冒泡綁定事件并阻止冒泡
實現(xiàn)思路: 彈框采用一層遮罩層overlay遮蓋,遮罩層寬高設為窗口寬高同大小,采用 catch:touchmove 綁定該層的touchmove事件為空函數(shù)防止其冒泡 。
給overlay組件外層綁定touchmove為空函數(shù)并阻止冒泡:
// overlay/index.wxml <van-transition show="{{ show }}" custom-class="van-overlay" custom-style="z-index: {{ zIndex }}; {{ customStyle }}" duration="{{ duration }}" bind:tap="onClick" catch:touchmove="noop" /* * 通過catch:touchmove來阻止冒泡至overlay層的事件繼續(xù)往上冒泡, * 實現(xiàn)內(nèi)層嵌套的內(nèi)容可以響應touchmove事件而外層(頁面)滾動事件不響應), * 以此來解決滾動事件穿透 */ > <slot></slot> </van-transition> 復制代碼
overlay組件外層fixed定位固定寬高防止?jié)L動:
// overlay/index.less .van-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; .theme(background-color, '@overlay-background-color'); } 復制代碼
實現(xiàn)思路:與vant-weapp小程序框架中相似, 彈框采用一層遮罩層overlay遮蓋,遮罩層寬高設為窗口寬高同大小,采用 @touchmove 綁定該層的touchmove事件,在事件中用event.stopPropagation阻止事件冒泡 。
給overlay組件外層綁定touchmove事件阻止冒泡:
return ( <transition name="van-fade"> <div vShow={props.show} style={style} class={[bem(), props.className]} onTouchmove={preventTouchMove} {...inherit(ctx, true)} /> </transition> ); 復制代碼
const preventTouchMove(e: Event): void = () => { event.stopPropagation(); } <span>復制代碼</span>
overlay組件外層fixed定位固定寬高防止?jié)L動:
.van-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; .theme(background-color, '@overlay-background-color'); } 復制代碼
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務