JavaScript中DOM元素被替换后如何持续响应事件监听？

你当前的实现是逐节点给动态生成的tile绑定独立点击监听器。当牌架容器执行整体重绘时，所有旧tile节点会被直接移除销毁，附着在这些节点上的事件监听器也会随之被浏览器回收；如果重绘生成新tile的流程中没有同步重新执行绑定操作，新节点自然无法响应点击交互。
就算你每次重绘后遍历新节点重新绑定，也会产生不必要的重复DOM操作，长期运行容易出现内存泄漏、交互性能下降的问题。

利用DOM事件冒泡的特性，将点击监听器绑定在*不会被重绘销毁的固定父容器（也就是牌架div本身）*上，仅需绑定一次，即可对所有生成在容器内部的tile节点生效，完全不受后续重绘、节点替换的影响。

实现步骤 #

• 页面初始化时，拿到固定的牌架容器DOM节点，仅绑定一次点击监听器
• 监听器内部通过事件冒泡拿到实际触发点击的目标元素，校验是否为符合规则的tile节点
• 校验通过后，基于tile节点上存储的唯一标识，执行原有的tile选择、放置业务逻辑
• 重绘牌架的函数中，仅负责生成tile节点、写入对应的业务标识，完全不需要处理事件绑定逻辑

参考代码 #

旧的高频失效写法：

// 每次生成tile都单独绑事件，重绘后逻辑断裂
function renderRack(playerTiles) {
  const rackEl = document.querySelector('#player-rack')
  rackEl.innerHTML = ''
  playerTiles.forEach(tile => {
    const tileNode = document.createElement('div')
    tileNode.classList.add('scrabble-tile')
    tileNode.textContent = tile.letter
    // 逐节点绑定，重绘生成的新节点如果没走这段逻辑就会失效
    tileNode.addEventListener('click', handleTileClick)
    rackEl.appendChild(tileNode)
  })
}

改成委托写法后的稳定实现：

// 页面初始化阶段，仅给固定的牌架容器绑一次监听器
const rackContainer = document.querySelector('#player-rack')
rackContainer.addEventListener('click', (event) => {
  // 匹配实际点击的tile节点，兼容tile内部嵌套子元素的场景
  const clickedTile = event.target.closest('.scrabble-tile')
  // 非tile元素触发的点击直接忽略
  if (!clickedTile || !rackContainer.contains(clickedTile)) return

  // 读取tile节点上存储的唯一标识，执行原有业务逻辑
  const tileUniqueId = clickedTile.dataset.tileId
  handleTileSelect(tileUniqueId)
})

// 重绘牌架时完全不需要处理事件绑定
function renderRack(playerTiles) {
  rackContainer.innerHTML = ''
  playerTiles.forEach(tile => {
    const tileNode = document.createElement('div')
    tileNode.classList.add('scrabble-tile')
    // 把tile的唯一标识存在dataset上，供点击时读取
    tileNode.dataset.tileId = tile.id
    tileNode.textContent = tile.letter
    rackContainer.appendChild(tileNode)
  })
}

• 作为委托载体的父容器必须是不会被整体删除、替换的固定节点，不能是会随重绘销毁的DOM元素
• 校验目标节点时优先使用closest()方法，避免因为tile内部嵌套了分数标识、文本span等子元素，导致event.target直接匹配不到tile根节点
• 不要把完整的tile对象直接存在DOM节点上，统一通过dataset存储必要的唯一标识即可，减少内存占用
• 整个交互生命周期内，父容器的监听器只需要绑定一次，不需要在每次重绘时重复绑定、解绑

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