在元素上设置事件处理程序最灵活的方法是使用EventTarget.addEventListener方法。这种方法允许将多个侦听器分配给一个元素，并在需要时删除侦听器（使用EventTarget.removeEventListener）。
注意：能够添加和删除事件处理程序使你可以例如在不同的情况下让同一个按钮执行不同的操作。此外，在更复杂的程序中，清理旧的/未使用的事件处理程序可以提高效率。
下面显示了如何将一个简单的greet()函数设置为click事件的侦听器/事件处理程序（如果需要，你可以使用 lambda 函数而不是命名函数）。再次注意，事件作为第一个参数传递给事件处理程序。
jsconst btn = document.querySelector("button");
function greet(event) {
console.log("greet:", event);
}
btn.addEventListener("click", greet);
该方法还可以接收其他参数/选项来控制捕获和删除事件的方式。有关更多信息，请参阅EventTarget.addEventListener参考页面。
使用中止信号
一个值得注意的事件侦听器功能是能够使用中止信号同时清理多个事件处理程序。
这是通过将相同的AbortSignal传递给要一起删除的所有事件处理程序的addEventListener()调用来完成的。然后，你可以对拥有AbortSignal的控制器调用abort()，它将删除使用该信号添加的所有事件处理程序。例如，要添加一个可以使用AbortSignal删除的事件处理程序
jsconst controller = new AbortController();
btn.addEventListener(
"click",
(event) => {
console.log("greet:", event);
},
{ signal: controller.signal },
); // pass an AbortSignal to this handler
然后，可以使用以下方法删除上面代码创建的事件处理程序
jscontroller.abort(); // removes any/all event handlers associated with this controller