Javascript 點擊事件封裝

在Web開發中，常常使用Javascript實現交互效果，例如點擊按鈕觸發某項操作，但是在實際的開發過程中，我們不斷的重復著綁定事件、解綁事件、獲取目標元素等繁瑣過程。而通過封裝一個點擊事件來提高代碼重用性和可讀性，可以大大減少我們的開發時間，提高開發效率。

傳統的點擊事件綁定方式

在傳統的點擊事件綁定方式中，我們需要先通過DOM元素獲取到要綁定事件的目標元素，然后再通過addEventListener綁定事件。舉個例子：

// 獲取目標元素
const btn = document.getElementById("btn");
// 綁定點擊事件
btn.addEventListener('click', function() {
alert('按鈕被點擊了！');
});

可以看到，這種方式雖然簡單易懂，但是當我們需要為多個元素綁定點擊事件時，就需要不斷的復制黏貼這段代碼，并修改為不同的ID名稱，非常繁瑣。

封裝一個點擊事件函數

為了解決傳統綁定方式帶來的問題，我們可以封裝一個點擊事件函數，只需要一次定義，便可以在多個地方重復利用。以下是一個簡單的封裝示例：

function addClickEvent(element, fn) {
// 獲取目標元素
const target = document.getElementById(element);
// 綁定點擊事件
target.addEventListener('click', fn);
}
// 使用示例
addClickEvent("btn", function() {
alert('按鈕被點擊了！');
});

可以看到，我們封裝了一個addClickEvent函數，需要傳入兩個參數，在函數體內部完成了獲取目標元素和綁定事件的操作。現在我們只需要在需要使用的地方調用addClickEvent函數即可綁定點擊事件，非常方便！

使用自定義屬性來綁定事件

在上面的示例中，我們需要傳入目標元素的ID名稱，這使得我們在綁定事件的時候需要事先獲取目標元素的ID。但是，在實際的開發中，經常存在創建動態元素，不知道元素ID的情況。這種情況下，我們可以使用自定義屬性來綁定事件，讓代碼更加靈活。

function addClickEvent(element, fn) {
// 獲取目標元素
const targets = document.querySelectorAll(`[click-event=${element}]`);
// 綁定點擊事件
Array.from(targets).forEach(target =>{
target.addEventListener('click', fn);
});
}
// 使用示例
addClickEvent("btn", function() {
alert('按鈕被點擊了！');
});
<!-- HTML代碼 -->
<button click-event="btn">點擊我</button>

可以看到，在HTML代碼中，我們使用了自定義屬性來綁定事件，而不是使用元素ID。這樣，我們就可以根據自定義屬性來定位元素并綁定事件了。

解綁點擊事件

與綁定點擊事件相對應的是解綁點擊事件，一般在某些特定條件下我們需要解綁事件以避免產生沖突。以下是解綁點擊事件的函數示例：

function removeClickEvent(element, fn) {
// 獲取目標元素
const targets = document.querySelectorAll(`[click-event=${element}]`);
// 解綁點擊事件
Array.from(targets).forEach(target =>{
target.removeEventListener('click', fn);
});
}
// 使用示例
removeClickEvent("btn", function() {
alert('按鈕被點擊了！');
});

可以看到，在removeClickEvent函數中，我們同樣使用自定義屬性來解綁事件，代碼非常簡單易懂。

總結

通過對Javascript點擊事件的封裝，我們可以大大提高代碼的重用性和可讀性，減少代碼冗余，提高開發效率。雖然本文以點擊事件為例，但是通過類似的方式，我們可以對其他事件進行封裝，讓代碼更加簡潔明了，產生良好的開發體驗。