重写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;的示例。并举例说明了CCD_ 2/CCD_。这些方法之间有区别吗？我可以用其中的任何一个来介绍内存泄漏吗？

Answer 1

为了允许在给定对象上为同一事件安装多个处理程序，可以调用其addEventListener()方法，该方法管理对象上给定事件的处理程序列表。然后，可以通过调用对象的removeEventListener()函数将处理程序从对象中移除。

删除以前的事件处理程序后，可以再次将新的event处理程序附加到同一元素。这样就不会有任何内存泄漏。

代码演示：

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};