动态新增span元素后原有元素Event listeners丢失问题咨询

事件监听器丢失的核心原因是createTag函数中这行代码：

search.innerHTML = search.innerHTML + '.';

对容器的innerHTML属性重新赋值时，浏览器会先销毁容器内所有已存在的DOM节点，再根据传入的HTML字符串重新生成整套DOM结构。之前给旧span绑定的事件监听器是挂载在原始DOM节点上的，旧节点被销毁后，监听器自然会全部失效。

1. 彻底移除innerHTML拼接的写法，改用原生DOM方法插入节点，避免重绘销毁已有元素
2. 改用事件委托将事件绑定在父容器#search上，所有后续新增的span元素自动继承事件，无需每次新建元素都重复绑定监听器
3. 补全逻辑细节：移除输入时残留在当前span内的句号、删除空tag时同步清理相邻的多余句号分隔符、修正空tag的数量判断逻辑

修复后完整的myscript.js代码如下（HTML部分无需修改）：

const search = document.getElementById('search');
// 保留原有预定义颜色数组
const palette = ['#e53935', '#1e88e5', '#43a047', '#fb8c00', '#8e24aa'];

// 父容器统一绑定keyup事件，所有.tag元素触发的事件都会冒泡到这里处理
search.addEventListener('keyup', (e) => {
  if (!e.target.classList.contains('tag')) return;
  const currentTag = e.target;

  if (e.key === '.') {
    // 清除当前标签内刚输入的末尾句号
    currentTag.textContent = currentTag.textContent.replace(/\.$/, '');
    // 创建分隔用的句号文本节点
    const dotNode = document.createTextNode('.');
    // 生成新标签
    const tagCount = search.querySelectorAll('.tag').length;
    const newTag = document.createElement('span');
    newTag.className = 'tag';
    newTag.contentEditable = true;
    newTag.style.color = palette[tagCount % palette.length];
    // 按顺序在当前标签后面插入句号和新标签
    currentTag.after(dotNode, newTag);
    // 焦点切换到新标签
    newTag.focus();
    e.preventDefault();
  }
});

// 父容器统一绑定blur事件，处理空标签删除
search.addEventListener('blur', (e) => {
  if (!e.target.classList.contains('tag')) return;
  const currentTag = e.target;
  const totalTagCount = search.querySelectorAll('.tag').length;

  if (currentTag.innerText.length === 0 && totalTagCount > 1) {
    // 同步删除标签前面的多余句号
    const prevNode = currentTag.previousSibling;
    if (prevNode?.nodeType === Node.TEXT_NODE && prevNode.textContent.trim() === '.') {
      prevNode.remove();
    }
    currentTag.remove();
  }
}, true);

// 初始化页面已有的第一个标签
const initTag = search.querySelector('.tag');
if (initTag) {
  initTag.contentEditable = true;
}

• 原有逻辑用search.childElementCount统计标签数量不准确，因为容器内的句号是文本节点，不会计入元素节点数，用querySelectorAll('.tag').length统计标签数量更可靠
• 事件委托的写法性能更好，不管新增多少个标签，都只需要在父容器绑定一次事件，没有内存泄漏风险

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