天津市做網(wǎng)站的公司查淘寶關(guān)鍵詞排名軟件
前言
在開發(fā) Vue 項目時，我們經(jīng)常需要處理大量的點擊事件。為每個可點擊的元素單獨添加事件監(jiān)聽器不僅會增加代碼的復(fù)雜度，還會降低性能。事件委托是一種有效的優(yōu)化方式，它可以顯著減少事件監(jiān)聽器的數(shù)量，提高代碼的可維護(hù)性和執(zhí)行效率。我們通過一個實際示例，詳細(xì)講解如何在 Vue 項目中使用事件委托。簡單記錄一下
一. 事件委托定義
VueJS中的事件委托是一種優(yōu)化事件處理和提升性能的技術(shù)，它允許你在一個父元素上監(jiān)聽事件，而不是在每個子元素上單獨綁定事件處理器。這種做法基于JavaScript 的事件冒泡機制，即在DOM樹中，事件會從最深層的節(jié)點開始向上冒泡，直到到達(dá)document根節(jié)點。
二. 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>2. 以上部分代碼，我們寫了一個父級 div 容器 .iconInside_box，其中包含5個 img 元素，每個 img 元素代表一個可點擊的圖標(biāo)。其中：
- @click=“choseIconInside”，在父級容器上綁定點擊事件監(jiān)聽器。
- data-action，每個 img 元素都有一個data-action 屬性，用于標(biāo)識點擊時要執(zhí)行的動作。
三. 事件邏輯函數(shù)
1. 事件觸發(fā)時，事件委托的處理函數(shù)；這里我們有一個包含多個圖標(biāo)的 div 容器，每個HTML元素圖標(biāo)，有不同的點擊操作，請看以下：
choseIconInside(e) {const action = e.target.getAttribute("data-action");if (action) {switch (action) {case "moveUp":console.log("向上移動");// 實現(xiàn)向上移動的邏輯this.viewer.camera.moveUp(10);break;case "moveDown":console.log("向下移動");// 實現(xiàn)向下移動的邏輯this.viewer.camera.moveDown(10);break;case "moveLeft":console.log("向左移動");// 實現(xiàn)向左移動的邏輯this.viewer.camera.moveLeft(10);break;case "moveRight":console.log("向右移動");// 實現(xiàn)向右移動的邏輯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è)置相機的默認(rèn)方向（heading），此處為朝向東南方向heading: this.Cesium.Math.toRadians(238),// 設(shè)置相機的俯仰角（pitch），此處為略微向下看pitch: this.Cesium.Math.toRadians(-15),// 設(shè)置相機的滾轉(zhuǎn)角（roll），此處為不滾轉(zhuǎn)roll: 0.0,},duration: 2,complete: function () {_this.viewer.camera.zoomOut(200); // 在飛行動畫完成后縮小場景},});break;default:console.log("未知動作");}}},},2. 以上代碼我們展示了一個事件處理器函數(shù) choseIconInside，它用于響應(yīng)用戶在界面中對某些圖標(biāo)或按鈕的點擊操作。該函數(shù)主要實現(xiàn)了以下功能：
1. 讀取data-action屬性：
- 當(dāng)事件觸發(fā)時，函數(shù)通過事件對象 e.target 獲取被點擊元素上的 data-action 屬性值。這個屬性是用來區(qū)分不同圖標(biāo)或按鈕的功能的。
2. 根據(jù)data-action執(zhí)行不同操作：
- 使用 switch 語句根據(jù) data-action 的值執(zhí)行相應(yīng)的邏輯。
- "moveUp" 和 "moveDown"：控制相機沿垂直軸向上或向下移動。
- "moveLeft" 和 "moveRight"：控制相機沿水平軸向左或向右移動。
- "mainView"：將相機飛往預(yù)設(shè)的位置，并設(shè)置相機的方向和角度，最后在動畫完成后再執(zhí)行縮放操作。
3. Cesium相關(guān)操作：
- this.viewer.camera 是用來控制3D場景中相機行為的對象。
- moveUp, moveDown, moveLeft, 和 moveRight 方法用于即時地改變相機位置。
- flyTo 方法則用于創(chuàng)建一個平滑的相機飛行動畫到指定的地理坐標(biāo)，同時可以設(shè)定飛行結(jié)束后的回調(diào)函數(shù)。
4. 錯誤處理：
- 如果 data-action 的值不是預(yù)期的任何一種情況，代碼將輸出一條“未知動作”的日志信息。
3.?choseIconInside 函數(shù)是一個用于處理用戶交互的事件處理器，它根據(jù)被點擊元素的 data-action 屬性值執(zhí)行特定的相機控制操作，從而實現(xiàn)對3D場景的導(dǎo)航和視角調(diào)整。這種設(shè)計模式使得代碼更加模塊化和可維護(hù)，同時也提高了用戶界面的響應(yīng)性和交互性。
4. 這里的switch語句是一種選擇結(jié)構(gòu)，它允許程序基于不同的條件來執(zhí)行不同的代碼塊。switch語句通常用來替代多個if...else if...else語句，當(dāng)有大量條件需要檢查時，使用switch可以使代碼更清晰、更簡潔。
四. 事件委托的優(yōu)勢
減少事件監(jiān)聽器數(shù)量：通過在父元素上綁定事件監(jiān)聽器，避免了在每個子元素上分別綁定監(jiān)聽器，減少了內(nèi)存消耗和提高了性能。
動態(tài)添加元素：如果頁面中需要動態(tài)添加新的子元素，事件委托可以確保新元素也能自動獲得事件處理能力，而無需重新綁定事件。
簡化代碼：使用事件委托可以使你的代碼更加簡潔和易于維護(hù)，尤其是當(dāng)有大量相似類型的元素需要處理相同類型的事件時。
五. 注意事項
事件目標(biāo)判斷：在事件處理函數(shù)中，你需要確保檢查
e.target（事件的目標(biāo)元素）是否是你想要處理的元素。這是因為事件冒泡也可能觸發(fā)父元素上綁定的事件，即使點擊的是父元素內(nèi)部的其他非目標(biāo)元素。事件阻止：有時你可能需要阻止事件的進(jìn)一步傳播，例如使用
e.stopPropagation()。這樣可以防止事件冒泡到更高級別的元素，避免觸發(fā)不必要的事件處理。
e.stopPropagation()是一個在JavaScript中用于阻止事件冒泡的方法。當(dāng)你在DOM樹中的某個元素上觸發(fā)一個事件（比如點擊事件），這個事件會首先在目標(biāo)元素上觸發(fā)，然后沿著DOM樹向上冒泡，依次觸發(fā)其祖先元素上的事件監(jiān)聽器。如果你不希望事件繼續(xù)向上冒泡并觸發(fā)更多的事件處理器，可以調(diào)用e.stopPropagation()。調(diào)用
stopPropagation()方法后，事件將不會繼續(xù)在其祖先元素上調(diào)用任何事件處理器。這在處理復(fù)雜的DOM結(jié)構(gòu)時非常有用，可以防止意外觸發(fā)不需要的事件處理器，從而避免潛在的性能問題或邏輯錯誤。性能考量：雖然事件委托可以提高性能，但過多的事件監(jiān)聽器仍然可能影響性能。合理規(guī)劃事件監(jiān)聽器的布局和層級可以進(jìn)一步優(yōu)化應(yīng)用的響應(yīng)速度。
六. 本章小結(jié)
事件委托是一種高效且優(yōu)雅的事件處理方式，尤其適用于處理大量相似子元素的事件。在Vue.js項目中運用事件委托，可以極大地提升代碼的可讀性和性能表現(xiàn)。
