移除DOM元素时自动解绑document上的keydown/keyup事件监听

场景一：绑定document时，元素删除后自动解绑监听 #

方法1：手动同步解绑（最直接） #

在移除div的同时，手动调用removeEventListener解绑对应的监听函数：

let div = document.getElementById("div1");
function update(e) {
  div.textContent = `Pressed: ${e.key}`;
}
document.addEventListener("keydown", update);

// 移除元素时同步解绑监听
div.remove();
document.removeEventListener("keydown", update);

方法2：用MutationObserver自动监听元素移除 #

如果不确定div会在什么时候被其他代码移除，可以用MutationObserver监听DOM变化，检测到div被移除时自动解绑：

let div = document.getElementById("div1");
function update(e) {
  div.textContent = `Pressed: ${e.key}`;
}
document.addEventListener("keydown", update);

// 创建观察者，监听节点移除事件
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.removedNodes.includes(div)) {
      document.removeEventListener("keydown", update);
      observer.disconnect(); // 完成后停止监听，避免资源浪费
      break;
    }
  }
});
// 监听body及其所有子节点的变化
observer.observe(document.body, { childList: true, subtree: true });

方法3：用AbortController管理监听（现代浏览器推荐） #

利用AbortController的信号机制，绑定监听时传入信号，移除div时触发abort即可自动解绑所有关联监听：

const controller = new AbortController();
let div = document.getElementById("div1");
function update(e) {
  div.textContent = `Pressed: ${e.key}`;
}
// 绑定监听时传入signal参数
document.addEventListener("keydown", update, { signal: controller.signal });

// 移除div时触发abort，自动解绑监听
div.remove();
controller.abort();

场景二：绑定元素本身，同时监听所有键盘事件（无需用户点击） #

非表单元素默认无法接收键盘事件，必须设置为可聚焦元素。给div添加tabindex="-1"（既支持聚焦，又不会被Tab键选中），再通过JS自动聚焦，就能无需用户点击触发keydown事件：

let div = document.getElementById("div1");
// 设置tabindex让div可聚焦，-1表示不参与tab导航
div.setAttribute("tabindex", "-1");
// 自动聚焦div，用户无需手动点击
div.focus();

function update(e) {
  div.textContent = `Pressed: ${e.key}`;
}
// 绑定到div本身，移除元素时监听自动解绑
div.addEventListener("keydown", update);

// 移除div时自动解绑监听
div.remove();

如果担心div失去焦点（比如用户点击了其他元素），可以额外监听focusout事件，自动重新聚焦：

div.addEventListener("focusout", () => {
  setTimeout(() => div.focus(), 0);
});

内容的提问来源于stack exchange，提问作者user1763510