前言

在開發(fā) Vue 項(xiàng)目時(shí)，我們經(jīng)常需要處理大量的點(diǎn)擊事件。為每個(gè)可點(diǎn)擊的元素單獨(dú)添加事件監(jiān)聽器不僅會(huì)增加代碼的復(fù)雜度，還會(huì)降低性能。事件委托是一種有效的優(yōu)化方式，它可以顯著減少事件監(jiān)聽器的數(shù)量，提高代碼的可維護(hù)性和執(zhí)行效率。我們通過一個(gè)實(shí)際示例，詳細(xì)講解如何在 Vue 項(xiàng)目中使用事件委托。簡單記錄一下

---

一. 事件委托定義

VueJS中的事件委托是一種優(yōu)化事件處理和提升性能的技術(shù)，它允許你在一個(gè)父元素上監(jiān)聽事件，而不是在每個(gè)子元素上單獨(dú)綁定事件處理器。這種做法基于JavaScript 的事件冒泡機(jī)制，即在DOM樹中，事件會(huì)從最深層的節(jié)點(diǎn)開始向上冒泡，直到到達(dá)document根節(jié)點(diǎn)。

---

二. HTML 內(nèi)容結(jié)構(gòu)

1. 首先，看下 HTML 部分：

    <div class="homeView_box"><div class="iconInside_box" @click="choseIconInside"><img src="@/assets/sxzy/1.png" class="cmCt img1" data-action="moveUp" /><imgsrc="@/assets/sxzy/2.png"class="cmCt img2"data-action="moveDown"/><imgsrc="@/assets/icons/home3.png"class="cmCt img3"data-action="mainView"@click="choseHomeIcon"/><imgsrc="@/assets/sxzy/3.png"class="cmCt img4"data-action="moveLeft"/><imgsrc="@/assets/sxzy/4.png"class="cmCt img5"data-action="moveRight"/></div></div>

---

三. 事件邏輯函數(shù)

1. 事件觸發(fā)時(shí)，事件委托的處理函數(shù)；這里我們有一個(gè)包含多個(gè)圖標(biāo)的 div 容器，每個(gè)HTML元素圖標(biāo)，有不同的點(diǎn)擊操作，請(qǐng)看以下：

    choseIconInside(e) {const action = e.target.getAttribute("data-action");if (action) {switch (action) {case "moveUp":console.log("向上移動(dòng)");// 實(shí)現(xiàn)向上移動(dòng)的邏輯this.viewer.camera.moveUp(10);break;case "moveDown":console.log("向下移動(dòng)");// 實(shí)現(xiàn)向下移動(dòng)的邏輯this.viewer.camera.moveDown(10);break;case "moveLeft":console.log("向左移動(dòng)");// 實(shí)現(xiàn)向左移動(dòng)的邏輯this.viewer.camera.moveLeft(10);break;case "moveRight":console.log("向右移動(dòng)");// 實(shí)現(xiàn)向右移動(dòng)的邏輯this.viewer.camera.moveRight(10);break;case "mainView":console.log("主視角圖");let _this = this;this.viewer.camera.flyTo({destination: this.Cesium.Cartesian3.fromDegrees(118.879624,32.036791,10),orientation: {// 設(shè)置相機(jī)的默認(rèn)方向（heading），此處為朝向東南方向heading: this.Cesium.Math.toRadians(238),// 設(shè)置相機(jī)的俯仰角（pitch），此處為略微向下看pitch: this.Cesium.Math.toRadians(-15),// 設(shè)置相機(jī)的滾轉(zhuǎn)角（roll），此處為不滾轉(zhuǎn)roll: 0.0,},duration: 2,complete: function () {_this.viewer.camera.zoomOut(200); // 在飛行動(dòng)畫完成后縮小場景},});break;default:console.log("未知?jiǎng)幼?#34;);}}},},

2. 以上代碼我們展示了一個(gè)事件處理器函數(shù) choseIconInside，它用于響應(yīng)用戶在界面中對(duì)某些圖標(biāo)或按鈕的點(diǎn)擊操作。該函數(shù)主要實(shí)現(xiàn)了以下功能：

1. 讀取data-action屬性：

• 當(dāng)事件觸發(fā)時(shí)，函數(shù)通過事件對(duì)象 e.target 獲取被點(diǎn)擊元素上的 data-action 屬性值。這個(gè)屬性是用來區(qū)分不同圖標(biāo)或按鈕的功能的。

2. 根據(jù)data-action執(zhí)行不同操作：

• 使用 switch 語句根據(jù) data-action 的值執(zhí)行相應(yīng)的邏輯。
• "moveUp" 和 "moveDown"：控制相機(jī)沿垂直軸向上或向下移動(dòng)。
• "moveLeft" 和 "moveRight"：控制相機(jī)沿水平軸向左或向右移動(dòng)。
• "mainView"：將相機(jī)飛往預(yù)設(shè)的位置，并設(shè)置相機(jī)的方向和角度，最后在動(dòng)畫完成后再執(zhí)行縮放操作。

3. Cesium相關(guān)操作：

• this.viewer.camera 是用來控制3D場景中相機(jī)行為的對(duì)象。
• moveUp, moveDown, moveLeft, 和 moveRight 方法用于即時(shí)地改變相機(jī)位置。
• flyTo 方法則用于創(chuàng)建一個(gè)平滑的相機(jī)飛行動(dòng)畫到指定的地理坐標(biāo)，同時(shí)可以設(shè)定飛行結(jié)束后的回調(diào)函數(shù)。

4. 錯(cuò)誤處理：

• 如果 data-action 的值不是預(yù)期的任何一種情況，代碼將輸出一條“未知?jiǎng)幼鳌钡娜罩拘畔ⅰ?/li>

3.?choseIconInside 函數(shù)是一個(gè)用于處理用戶交互的事件處理器，它根據(jù)被點(diǎn)擊元素的 data-action 屬性值執(zhí)行特定的相機(jī)控制操作，從而實(shí)現(xiàn)對(duì)3D場景的導(dǎo)航和視角調(diào)整。這種設(shè)計(jì)模式使得代碼更加模塊化和可維護(hù)，同時(shí)也提高了用戶界面的響應(yīng)性和交互性。

4. 這里的switch語句是一種選擇結(jié)構(gòu)，它允許程序基于不同的條件來執(zhí)行不同的代碼塊。switch語句通常用來替代多個(gè)if...else if...else語句，當(dāng)有大量條件需要檢查時(shí)，使用switch可以使代碼更清晰、更簡潔。

---

四. 事件委托的優(yōu)勢(shì)

1. 減少事件監(jiān)聽器數(shù)量：通過在父元素上綁定事件監(jiān)聽器，避免了在每個(gè)子元素上分別綁定監(jiān)聽器，減少了內(nèi)存消耗和提高了性能。

2. 動(dòng)態(tài)添加元素：如果頁面中需要?jiǎng)討B(tài)添加新的子元素，事件委托可以確保新元素也能自動(dòng)獲得事件處理能力，而無需重新綁定事件。

3. 簡化代碼：使用事件委托可以使你的代碼更加簡潔和易于維護(hù)，尤其是當(dāng)有大量相似類型的元素需要處理相同類型的事件時(shí)。

---

五. 注意事項(xiàng)

1. 事件目標(biāo)判斷：在事件處理函數(shù)中，你需要確保檢查e.target（事件的目標(biāo)元素）是否是你想要處理的元素。這是因?yàn)槭录芭菀部赡苡|發(fā)父元素上綁定的事件，即使點(diǎn)擊的是父元素內(nèi)部的其他非目標(biāo)元素。

2. 事件阻止：有時(shí)你可能需要阻止事件的進(jìn)一步傳播，例如使用e.stopPropagation()。這樣可以防止事件冒泡到更高級(jí)別的元素，避免觸發(fā)不必要的事件處理。

3. e.stopPropagation() 是一個(gè)在JavaScript中用于阻止事件冒泡的方法。當(dāng)你在DOM樹中的某個(gè)元素上觸發(fā)一個(gè)事件（比如點(diǎn)擊事件），這個(gè)事件會(huì)首先在目標(biāo)元素上觸發(fā)，然后沿著DOM樹向上冒泡，依次觸發(fā)其祖先元素上的事件監(jiān)聽器。如果你不希望事件繼續(xù)向上冒泡并觸發(fā)更多的事件處理器，可以調(diào)用 e.stopPropagation()。

4. 調(diào)用 stopPropagation() 方法后，事件將不會(huì)繼續(xù)在其祖先元素上調(diào)用任何事件處理器。這在處理復(fù)雜的DOM結(jié)構(gòu)時(shí)非常有用，可以防止意外觸發(fā)不需要的事件處理器，從而避免潛在的性能問題或邏輯錯(cuò)誤。

5. 性能考量：雖然事件委托可以提高性能，但過多的事件監(jiān)聽器仍然可能影響性能。合理規(guī)劃事件監(jiān)聽器的布局和層級(jí)可以進(jìn)一步優(yōu)化應(yīng)用的響應(yīng)速度。

---

六. 本章小結(jié)

事件委托是一種高效且優(yōu)雅的事件處理方式，尤其適用于處理大量相似子元素的事件。在Vue.js項(xiàng)目中運(yùn)用事件委托，可以極大地提升代碼的可讀性和性能表現(xiàn)。

創(chuàng)作不易，感覺有用，就一鍵三連，感謝(●'?'●)