在 JavaScript 中，事件是在瀏覽器中發(fā)生的操作，例如使用者點(diǎn)擊按鈕、按下按鍵或載入頁(yè)面。事件對(duì)於創(chuàng)建動(dòng)態(tài)、互動(dòng)式 Web 應(yīng)用程式至關(guān)重要，因?yàn)樗鼈冊(cè)试S您的程式碼響應(yīng)用戶互動(dòng)和系統(tǒng)變更。

為了處理這些事件，我們使用事件監(jiān)聽(tīng)器。事件偵聽(tīng)器是「?jìng)陕?tīng)」指定事件或與給定元素互動(dòng)（例如按一下按鈕）的函數(shù)。當(dāng)該事件發(fā)生時(shí)，偵聽(tīng)器執(zhí)行定義的回調(diào)函數(shù)，讓您可以指定回應(yīng)中應(yīng)該發(fā)生什麼。例如，當(dāng)單擊按鈕元素時(shí)，其文字內(nèi)容從“未單擊”更改為“已單擊！”。

雖然將單獨(dú)的事件偵聽(tīng)器附加到每個(gè)元素是很常見(jiàn)的，但以這種方式管理多個(gè)「內(nèi)聯(lián)」偵聽(tīng)器很快就會(huì)變得重複且低效。這種方法會(huì)使您的程式碼變得更長(zhǎng)，並且可能使其更難以閱讀和維護(hù)。為了解決這個(gè)問(wèn)題，您可以將事件偵聽(tīng)器封裝到可重複使用的函數(shù)中。此方法簡(jiǎn)化了您的程式碼，減少了重複，並增強(qiáng)了以後的可維護(hù)性。

內(nèi)嵌事件監(jiān)聽(tīng)器的問(wèn)題

這是一個(gè)典型的內(nèi)嵌事件監(jiān)聽(tīng)器的範(fàn)例：

const myButton = document.getElementById('myButton')
myButton.textContent = "Unclicked"

myButton.addEventListener('click', () => {
    myButton.textContent = 'Clicked!';
});

此程式碼正常運(yùn)作 - 按一下 myButton 時(shí)，其??文字會(huì)從「未按一下」變更為「已按一下！」但是，如果您有多個(gè)按鈕想要變更其文字呢？或其他也需要更新文字的可點(diǎn)擊元素？為程式碼中的每個(gè)元素編寫單獨(dú)的事件偵聽(tīng)器可能很快就會(huì)變得乏味且低效。

簡(jiǎn)化事件監(jiān)聽(tīng)器

您可以將其封裝在可重複使用的函數(shù)中，而不是為每個(gè)元素重複邏輯：

function changeElementText(element, newText) {
    element.addEventListener('click', () => {
        element.textContent = newText;
    });
}

changeElementText 函數(shù)有兩個(gè)參數(shù)：element 和 newText。 element 參數(shù)表示要將事件偵聽(tīng)器附加到的元素。這可以是任何元素，例如按鈕、div，甚至標(biāo)題。為了獲得更多的多功能性，newText 參數(shù)可讓您指定您希望元素在按一下時(shí)顯示的文字內(nèi)容。透過(guò)使用這些參數(shù)，該函數(shù)變得高度可重複使用，因?yàn)槟梢詣?dòng)態(tài)地將其應(yīng)用於任何元素，顯示任何文字。

要使用該函數(shù)，只需使用所需的元素和文字作為參數(shù)呼叫changeElementText()。

現(xiàn)在您可以使用此函數(shù)來(lái)影響一個(gè)元素：

changeElementText(myButton, 'Clicked!');

您也可以使用循環(huán)將其應(yīng)用於多個(gè)元素：

const myButton = document.getElementById('myButton')
myButton.textContent = "Unclicked"

myButton.addEventListener('click', () => {
    myButton.textContent = 'Clicked!';
});

進(jìn)一步提高可重複使用性

您可以透過(guò)建立函數(shù)來(lái)進(jìn)一步實(shí)現(xiàn)這種可重複使用性，該函數(shù)接受要為其分配事件的元素的參數(shù)、要使用的事件類型以及指示事件應(yīng)完成的回呼函數(shù)。

function changeElementText(element, newText) {
    element.addEventListener('click', () => {
        element.textContent = newText;
    });
}

透過(guò)允許您單獨(dú)指定事件類型和回調(diào)函數(shù)，這種方法提供了最大的靈活性。您可以針對(duì)不同類型的事件和行為重複使用相同的函數(shù)，使您的程式碼更加乾淨(jìng)和靈活。

現(xiàn)在看看我們?nèi)绾问褂么朔椒▉?lái)更改「myButton」上的文字：

changeElementText(myButton, 'Clicked!');

嘗試使用另一個(gè)事件（例如滑鼠懸停）：

const allButtons = document.querySelectorAll('.button');
allButtons.forEach(button => {
    changeElementText(button, 'Clicked!');
});

或不同的回呼

function addEventListenerToElement(element, eventType, callback) {
    element.addEventListener(eventType, callback);
}

在此範(fàn)例中，當(dāng)使用者將滑鼠懸停在按鈕上時(shí)，其文字將變更為“Hovered！”，表示懸?；?dòng)。

最後的想法

將事件偵聽(tīng)器儲(chǔ)存在可重複使用函數(shù)中是一種簡(jiǎn)單但功能強(qiáng)大的技術(shù)，可保持程式碼整潔、模組化和高效能。無(wú)論您是初學(xué)者還是經(jīng)驗(yàn)豐富的開發(fā)人員，採(cǎi)用這種方法都將幫助您編寫更好的 JavaScript。嘗試將此方法應(yīng)用於您的下一個(gè)專案 - 無(wú)論您是建立導(dǎo)航功能表、管理表單交互，還是向庫(kù)添加動(dòng)態(tài)行為 - 並了解它如何簡(jiǎn)化您的程式碼庫(kù)並提高可維護(hù)性。

以上是增強(qiáng) JavaScript 中事件偵聽(tīng)器的可重複使用性的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！