這個問題在這里已經有了答案： addEventListener 與 onclick （21 個回答） 3 天前關閉。
我正在構建一個簡單的 todos 專案，用戶可以在其中輸入專案并將專案添加到串列以及洗掉任何專案。對于洗掉專案，用戶可以單擊洗掉圖示，然后可以通過彈出視窗確認洗掉。現在，我已將一個 eventListener 附加到專案串列，它會檢查用戶是否單擊了任何特定串列專案的洗掉按鈕。如果是，則會出現一個彈出視窗。現在我想監聽彈出視窗中“確認”按鈕上的點擊事件。我首先嘗試通過將 eventListener 附加到按鈕來執行此操作，如下所示：
entryList.addEventListener('click', e=> {
let node = e.target.parentNode;
if(e.target.classList.contains('delete')){
popup.style.display = 'block';
button.addEventListener('click', ()=> {
popup.style.display = 'none';
node.remove()
})
}
})
這給出了一個回應，如果我不確認洗掉但隨后洗掉串列中的其他專案，則我之前未確認洗掉的所有專案都將被洗掉。例如，如果我單擊了第 5 項上的洗掉按鈕，然后清除了彈出視窗，然后單擊了第 4 項的洗掉按鈕并確認了它，則第 4 項和第 5 項都會從串列中洗掉。
如果我改為對按鈕使用 onclick 屬性，則會出現同樣的問題：
entryList.addEventListener('click', e=> {
let node = e.target.parentNode;
if(e.target.classList.contains('delete')){
popup.style.display = 'block';
button.onclick = ()=>{
popup.style.display = 'none';
node.remove()
}
}
})
我正在獲得所需的輸出。
為什么代碼片段顯示不同的輸出以及 onclick 屬性和 click eventListener 之間的確切區別是什么？
uj5u.com熱心網友回復：
該代碼的不同之處在于，當您使用 時addEventListener，您正在添加一個事件處理程式，它不會對已添加的任何其他事件處理程式執行任何操作。因此，在您的第 5 項和第 4 項示例中，單擊按鈕時，兩個處理程式都會被呼叫。
相比之下，當您分配給 時onclick，您將使用新的處理程式替換該onclick屬性上的任何先前處理程式（就像任何其他分配一樣），因此之前的處理程式不再存在。
有了更完整的背景關系，我們可能會向您展示如何完全避免動態附加處理程式，但是如果您使用，則最小的更改addEventListener是記住該函式并removeEventListener在您不再希望呼叫該處理程式時呼叫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/368677.html
標籤：javascript dom 点击 事件处理 添加事件监听器