addEventListener能否动态调用？更新后DOM元素事件触发确认

1. 能不能给更新后的DOM元素绑定事件？ #

完全可以，但有个前提：你得拿到更新后的新元素的引用。当旧元素被替换成新元素后，新元素是独立的DOM节点，只要能用document.querySelector这类方法找到它，或者在替换时直接保存它的引用，就能调用addEventListener给它绑定事件。

2. 元素被替换后，原事件会触发谁？ #

你的测试结论是对的：只有原来的DOM元素会触发绑定的事件。原因很直接：

• 事件是绑定在具体的DOM节点上的，旧元素被替换后，哪怕它已经不在DOM树里，只要你还保留着它的引用（比如之前用变量存过），手动触发它的事件（比如originalEl.click()）依然会执行对应的回调。
• 新替换的元素是全新节点，没有绑定过之前的事件，所以不会触发原事件。

给你举个直观的代码例子：

// 获取原元素并绑定点击事件
const originalEl = document.getElementById('domelemet1');
originalEl.addEventListener('click', () => {
  console.log('原元素触发事件');
  // 替换成新元素
  const newEl = document.createElement('div');
  newEl.textContent = '新元素';
  originalEl.replaceWith(newEl);
});

// 延迟获取新元素并绑定事件
setTimeout(() => {
  const newEl = document.querySelector('div');
  newEl.addEventListener('click', () => {
    console.log('新元素触发事件');
  });
}, 1000);

这个例子里：

• 第一次点击原元素，会打印“原元素触发事件”，然后元素被替换。
• 替换后的新元素刚出现时点击，不会有任何输出，直到1秒后给它绑定了事件，再点击才会打印“新元素触发事件”。

要是想让替换后的元素自动处理类似事件，推荐用事件委托：把事件绑定在父元素上，利用事件冒泡来处理子元素的点击，不管子元素是原来的还是后来动态替换的。比如：

// 父元素绑定事件
document.getElementById('parentContainer').addEventListener('click', (e) => {
  // 判断点击的是目标元素
  if (e.target.id === 'domelemet1' || e.target.classList.contains('random-new-el')) {
    console.log('目标元素被点击');
  }
});

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