JavaScript Event監(jiān)聽

JavaScript Event監(jiān)聽是處理Web應(yīng)用程序中用戶交互和其他操作的一種強(qiáng)大方式。在本文中，我們將探索JavaScript Event監(jiān)聽的基本操作和實(shí)現(xiàn)。

Event監(jiān)聽機(jī)制可以幫助我們監(jiān)控以及檢測到用戶的行為，例如 點(diǎn)擊鏈接，提交表單和鼠標(biāo)移動(dòng)等等。然后，我們就可以針對(duì)這些事件做出特定的動(dòng)作或反應(yīng)。以一個(gè)簡單的示例為例：

let button = document.querySelector("button");
button.addEventListener("click", function() {
console.log("雙擊確認(rèn)");
});

上述代碼會(huì)監(jiān)聽在按鈕被點(diǎn)擊的時(shí)，會(huì) console.log("雙擊確認(rèn)")。 addEventListener()是用于注冊(cè)事件處理程序的函數(shù)。在這個(gè)例子中，我們注冊(cè)了一個(gè)單擊事件，它會(huì)執(zhí)行一個(gè)簡單的 JavaScript 函數(shù)。

除了button上的click，DOM上總共有68個(gè)事件可以監(jiān)聽，這個(gè)包括click, dblclick ，mouseover, mouseleave等等。我們觸發(fā)一些事件的時(shí)候，還可以將事件傳遞給它們的父元素和子元素。例如，當(dāng)單擊按鈕時(shí)，也可以通過將事件傳遞到button的父元素來觸發(fā)父級(jí)事件。

我們可以將時(shí)間向其他元素傳遞，比如阻止事件從父元素觸發(fā)到子元素：

function buttonClicked(event) {
event.stopPropagation();
console.log("Button is clicked");
}
function divClicked() {
console.log("Div is clicked");
}
document.querySelector("button").addEventListener("click", buttonClicked);
document.querySelector("div").addEventListener("click", divClicked);

在上面這個(gè)例子中，一個(gè)單擊事件監(jiān)聽器添加到 button 元素上，通過buttonClicked()函數(shù)來捕捉單擊事件。但是，div也有單擊事件監(jiān)聽，并且在單擊事件觸發(fā)時(shí)，會(huì)執(zhí)行 divClicked() 函數(shù)。由于 “button” 元素是 div 元素的子元素，因此在單擊 "Button" 時(shí)，它也會(huì)立即觸發(fā) div 元素的事件。通過使用 stopPropagation() 方法，我們可以阻止單擊事件向上傳遞到 div 元素。

Event監(jiān)聽非常有用，但是有一個(gè)潛在的問題：在注冊(cè)事件監(jiān)聽器之前，如果我們嘗試在DOM節(jié)點(diǎn)上查找一個(gè)元素并注冊(cè)事件，當(dāng)我們從屏幕中刪除該節(jié)點(diǎn)時(shí)，事件監(jiān)聽器一直掛在該節(jié)點(diǎn)上。這時(shí)，必須手動(dòng)刪除所有事件監(jiān)聽器，否則它們將繼續(xù)保持存在并浪費(fèi)瀏覽器的內(nèi)存。

因此，在刪除元素之前，請(qǐng)始終刪除它上的所有事件監(jiān)聽器。例如，在使用appendChild()方法添加元素并在之后刪除時(shí)，最好刪除附加的元素：

let button1 = document.querySelector("button");
let container = document.querySelector("div");
function addNewButton() {
let newButton = document.createElement("button");
newButton.textContent = "Click me too";
newButton.addEventListener("click", function() {
console.log("New button is clicked");
});
container.appendChild(newButton);
}
function removeNewButton() {
let newButton = document.querySelector("button:nth-child(2)");
newButton.remove();
}
button1.addEventListener("click", addNewButton);
button1.addEventListener("click", removeNewButton);

在這個(gè)例子中，我們創(chuàng)建了一個(gè)新按鈕，它被添加到現(xiàn)有的div元素中。然后，我們向該新按鈕添加一個(gè)事件監(jiān)聽器。最后，我們?cè)诹硪粋€(gè)事件監(jiān)聽器中使用 remove()方法來刪除該按鈕。在這個(gè)例子中，我們可以輕松地保持 DOM 的干凈，并消除瀏覽器內(nèi)存泄漏的風(fēng)險(xiǎn)。

通過 JavaScript Event監(jiān)聽，我們能夠在用戶在瀏覽器中交互的不同情況下，獲得更好的控制權(quán)。 Event監(jiān)聽使得我們能夠更好地掌控頁面的交互，正因?yàn)槿绱耍谔幚碛脩羰录倪^程中充分運(yùn)用 Event監(jiān)聽是非常重要的。