覆蓋 DOM 事件處理程序的正確方法是什么？

Question

如果我創建了一個按鈕並附加了一個點擊處理程序：

let btn = document.createElement("button");
btn.innerHTML = "Do Something";
btn.onclick = () => { doSomething(); };
document.body.appendChild(btn);

后來我想將按鈕重新用於其他用途，這是覆蓋事件處理程序的安全方法嗎？

btn.innerHTML = "Do Something Else";
btn.onclick = () => { doSomethingElse(); }

我見過一些設置btn.onclick = null;的例子在附加新的處理程序之前。 還有一些addEventListener() / removeEventListener()的例子。 這些方法之間有區別嗎？ 我可以用這些中的任何一個來介紹 memory 泄漏嗎？

Answer 1

為了允許在給定的 object 上為同一事件安裝多個處理程序，您可以調用其addEventListener()方法，該方法管理 object 上給定事件的處理程序列表。 然后可以通過調用其removeEventListener() function 從 object 中刪除處理程序。

刪除先前的事件處理程序后，您可以再次將新的event處理程序附加到同一元素。 這樣也不會有任何 memory 泄漏。

代碼演示：

let btn = document.createElement("button");
btn.innerHTML = "Do Something";
element.addEventListener("click", doSomething, true)
document.body.appendChild(btn);

           ...
btn.removeEventListener("click", doSomething, true);  

// 第三個參數必須與前面的情況相同。 在這種情況下是真的。

btn.addEventListener("click",doSomethingThingElse};