双击事件出现JavaScript Null错误：无法读取null的addEventListener属性

报错场景 #

触发双击操作时出现以下错误：

Cannot read properties of null (reading 'addEventListener') at HTMLDocument.addDeleteListener

原实现代码：

const cardElement = document.querySelector('.card');
function addDeleteListener() {
  cardElement.addEventListener('dblclick', (event) => {
    event.target.remove();
  });
}

document.addEventListener('DOMContentLoaded', addDeleteListener);

页面中的卡片通过以下函数动态添加：

function addCard(cardTitle, column) {
  const card = document.createElement('div');
  card.classList.add('card');
  card.innerText = cardTitle;
  column.appendChild(card);
}

问题原因 #

1. const cardElement = document.querySelector('.card');在全局作用域执行，此时DOM可能尚未完全加载，或者还没有任何通过addCard创建的.card元素被添加到页面，导致cardElement的值为null。
2. 即便DOMContentLoaded触发后执行addDeleteListener，如果此时页面中还未创建任何卡片，cardElement依然是null，调用addEventListener自然会抛出错误。

修复方案 #

方案1：事件委托（适合批量处理动态元素） #

如果后续会频繁添加卡片，推荐用事件委托，把监听绑定到父元素上，无需给每个卡片单独绑定事件：

function addDeleteListener() {
  // 替换为卡片实际的父容器选择器
  const columnContainer = document.querySelector('.column');
  columnContainer.addEventListener('dblclick', (event) => {
    // 校验点击目标是否为卡片元素
    if (event.target.classList.contains('card')) {
      event.target.remove();
    }
  });
}

document.addEventListener('DOMContentLoaded', addDeleteListener);

方案2：创建卡片时直接绑定事件（你采用的方案） #

在addCard函数内部，创建卡片后立即绑定双击删除事件，确保每个新卡片都能正确触发删除逻辑：

// 向列中添加新卡片的函数
function addCard(cardTitle, column) {
  const card = document.createElement('div');
  card.classList.add('card');
  card.innerText = cardTitle;
  
  column.appendChild(card);

  card.addEventListener('dblclick', () => {
    card.remove();
  });
}

这种方式逻辑更直接，将卡片的创建与删除事件绑定在一起，从根源避免了全局选择器找不到元素的问题。

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