onclick想知道在將偵聽器設定為元素時是否有可以改進的性能/記憶體區域。
例子：
let btn = document.querySelector('.example')
btn.addEventListener('click', (e) => {
btn.classList.add('active');
btn.onmouseleave = () => {
console.warn('leave')
}
})
相比：
let btn = document.querySelector('.example')
btn.addEventListener('click', (e) => {
e.target.classList.add('active');
e.target.onmouseleave = () => {
console.warn('leave')
}
})
我認為 usingbtn需要做更多的作業，因為計算機必須保存變數并記住它，而 e.target 暫時使用該事件。哪一個最適合最少的記憶體消耗？
uj5u.com熱心網友回復：
Event.target可能不是您的btn- 讓您的按鈕（附加處理程式的元素）使用Event.currentTarget. 假設您單擊了按鈕內的圖示，Event.target它將成為您的圖示。
除了引擎實作之外，性能沒有太大差異。btn是一個存盤為變數的元素，它已經是currentTarget:btn === e.currentTarget // always true因此它是您的選擇。如果我還沒有btn快取元素，我會去Event.currentTarget參考 - 否則沒有太大區別。
onmouseleaveon*除非您從記憶體中創建（在一個非常小且可讀的腳本中）全新的元素，否則不應使用其他處理程式。將EventTarget.addEventListener()與{once: true}引數選項一起使用 - 如果需要 ()。
三、更好的版本：
const addActive = (evt) => {
const elBtn = evt.currentTarget;
elBtn.classList.add("active");
elBtn.addEventListener("pointerleave", () => {
console.log("leave");
}, {once:true})
};
// since you're using classes instead of ID,
// make sure to refer to All your elements by class:
const elsBtns = document.querySelectorAll('.example');
elsBtns.forEach((elBtn) => {
elBtn.addEventListener("click", addActive);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/497538.html
標籤：javascript 表现 记忆