覆盖 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() 的例子。这些方法之间有区别吗？我可以用其中任何一个引入内存泄漏吗？

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

覆盖 DOM 事件处理程序的正确方法是什么？

What is the correct way to override DOM event handlers?

javascript

dom-events