在 JavaScript 中，事件是在瀏覽器中發(fā)生的操作，例如用戶單擊按鈕、按下按鍵或加載頁面。事件對于創(chuàng)建動(dòng)態(tài)、交互式 Web 應(yīng)用程序至關(guān)重要，因?yàn)樗鼈冊试S您的代碼響應(yīng)用戶交互和系統(tǒng)更改。

為了處理這些事件，我們使用事件監(jiān)聽器。事件偵聽器是“偵聽”指定事件或與給定元素交互（例如單擊按鈕）的函數(shù)。當(dāng)該事件發(fā)生時(shí)，偵聽器執(zhí)行定義的回調(diào)函數(shù)，允許您指定響應(yīng)中應(yīng)該發(fā)生什么。例如，當(dāng)單擊按鈕元素時(shí)，其文本內(nèi)容從“未單擊”更改為“已單擊！”。

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

內(nèi)聯(lián)事件監(jiān)聽器的問題

這是一個(gè)典型的內(nèi)聯(lián)事件監(jiān)聽器的示例：

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

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

此代碼工作正常 - 單擊 myButton 時(shí)，其文本從“未單擊”更改為“已單擊！”但是，如果您有多個(gè)按鈕想要更改其文本怎么辦？或者其他也需要更新文本的可點(diǎn)擊元素？為代碼中的每個(gè)元素編寫單獨(dú)的事件偵聽器可能很快就會(huì)變得乏味且低效。

簡化事件監(jiān)聽器

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

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

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

要使用該函數(shù)，只需使用所需的元素和文本作為參數(shù)調(diào)用changeElementText()。

現(xiàn)在您可以使用此函數(shù)來影響一個(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)一步提高可重用性

您可以通過創(chuàng)建一個(gè)函數(shù)來進(jìn)一步實(shí)現(xiàn)這種可重用性，該函數(shù)接受要為其分配事件的元素的參數(shù)、要使用的事件類型以及指示事件應(yīng)完成的回調(diào)函數(shù)。

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

通過允許您單獨(dú)指定事件類型和回調(diào)函數(shù)，這種方法提供了最大的靈活性。您可以針對不同類型的事件和行為重用相同的函數(shù)，使您的代碼更加干凈和靈活。

現(xiàn)在看看我們?nèi)绾问褂么朔椒▉砀摹癿yButton”上的文本：

changeElementText(myButton, 'Clicked!');

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

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

或不同的回調(diào)

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

在此示例中，當(dāng)用戶將鼠標(biāo)懸停在按鈕上時(shí)，其文本將更改為“Hovered！”，表示懸停交互。

最后的想法

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

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