前言
在構(gòu)建現(xiàn)代 Web 應(yīng)用時(shí)，我們經(jīng)常需要處理大量數(shù)據(jù)，并將其渲染為列表或表格，對(duì)每個(gè)數(shù)據(jù)項(xiàng)綁定一個(gè)事件處理程序是常見(jiàn)的做法。但隨著數(shù)據(jù)量的增長(zhǎng)，這種做法將會(huì)導(dǎo)致嚴(yán)重的性能問(wèn)題；本文旨在介紹事件代理這一解決方案，幫助開(kāi)發(fā)者優(yōu)化 Web 應(yīng)用性能，提升用戶體驗(yàn)。
常見(jiàn)場(chǎng)景
在構(gòu)建現(xiàn)代 Web 應(yīng)用時(shí)，我們會(huì)使用各種現(xiàn)代 Web 框架來(lái)簡(jiǎn)化我們的工作。以 Vue 為例，渲染一個(gè)列表的代碼大致如下：
<template>
<ul>
<li v-for="item of someList" :key="item.id" @click="handleItemClick">{{ item.name }}</li>
</ul>
</template>
<script setup lang="ts">
const someList = [
...
];
const handleItemClick = (e: Event) => {
...
}
</script> someList 中存在多少條數(shù)據(jù)，頁(yè)面中便會(huì)存在多少個(gè)事件監(jiān)聽(tīng)處理程序。當(dāng) someList 數(shù)據(jù)量巨大時(shí)，大量的事件監(jiān)聽(tīng)器會(huì)占用大量?jī)?nèi)存，并導(dǎo)致嚴(yán)重的性能問(wèn)題。此時(shí)我們可以通過(guò)事件代理，將事件處理代理給父元素。事件代理利用了事件冒泡的機(jī)制，使得只需在父元素上綁定一個(gè)事件監(jiān)聽(tīng)器，即可處理所有子元素的事件，從而大大減少事件監(jiān)聽(tīng)器的數(shù)量，代碼如下：
<template>
<ul @click="handleListClick">
<li v-for="item of someList" :key="item.id" :data-id="item.id">{{ item.name }}</li>
</ul>
</template>
<script setup lang="ts">
const someList = [
...
];
const handleListClick= (e: Event) => {
const { id } = e.target.dataset;
if (id !== undefined) {
...
}
}
</script> 通過(guò)將子元素需要的數(shù)據(jù)綁定在 dataset 屬性中，我們可以方便的在事件代理中獲取這些數(shù)據(jù)，解決了參數(shù)傳遞的問(wèn)題。然而實(shí)際開(kāi)發(fā)中，列表項(xiàng)遠(yuǎn)比示例中要復(fù)雜得多，可能會(huì)包含多個(gè)圖標(biāo)、按鈕或其他子元素。
此時(shí)我們就需要一種方法來(lái)區(qū)分不同的按鈕；同樣我們可以使用 dataset 屬性，為不同的按鈕設(shè)置不同的 dataset 屬性值，然后在事件處理程序中通過(guò) event.target.dataset 來(lái)判斷哪個(gè)按鈕觸發(fā)了事件，代碼如下；
<template>
<ul @click="handleListClick">
<li v-for="item of someList" :key="item.id">
<p>文案</p>
<button :data-id="item.id" data-event="event1">button1</button>
<button :data-id="item.id" data-event="event2">button2</button>
</li>
</ul>
</template>
<script setup lang="ts">
const someList = [
...
];
const handleListClick= (e: Event) => {
const { id, event } = e.target.dataset;
if (id === undefined || event === undefined) return;
if (event === "event1") {
...
} else if (event === "event2") {
...
}
}
</script> 有時(shí)，列表子項(xiàng)內(nèi)包含多個(gè)無(wú)需任何事件處理程序的子元素，而數(shù)據(jù)綁定在列表子項(xiàng)的 dataset 屬性上。此時(shí)，如果點(diǎn)擊子元素， e.target 指向的是子元素，而非列表元素，無(wú)法直接獲取 dataset。 e.target.closest(selector) 方法可以向上查找匹配選擇器的最近祖先元素，從而解決這個(gè)問(wèn)題，代碼如下：
<template>
<ul @click="handleListClick">
<li v-for="item of someList" :key="item.id" :data-uid="item.uid">
<p>文案</p>
<img src="../avatar.png" />
</li>
</ul>
</template>
<script setup lang="ts">
const someList = [
...
];
const handleListClick= (e: Event) => {
let { uid } = e.target.dataset;
if (uid === undefined) {
const listItem = e.target.closest("li")
if (!listItem) return;
uid = listItem.dataset.uid;
}
....
}
</script> 結(jié)語(yǔ)
需要注意的是，事件代理并非適用于所有場(chǎng)景，開(kāi)發(fā)者需要針對(duì)具體情況進(jìn)行實(shí)際權(quán)衡。在需要處理大量相似元素的事件時(shí)，事件代理無(wú)疑是一種優(yōu)秀的解決方案。本文的代碼示例中以 Vue 框架為示例，但核心思想應(yīng)用在 React 或其他框架上也同樣使用，希望本文能夠幫助開(kāi)發(fā)者更好的使用事件代理，在實(shí)際開(kāi)發(fā)中做出更穩(wěn)妥的選擇。
