ES6下HTML元素重建后事件监听器无法重新绑定的解决方法

嘿，我明白你遇到的问题了——用箭头函数写的回调，把事件绑定放进渲染函数里就会报错，换成function声明就正常，这其实是函数提升的差异导致的。我给你两种ES6风格的解决办法，首选更优雅的事件委托方案：

方案1：事件委托（推荐） #

每次重新渲染后都手动绑定事件太繁琐，还容易出问题。事件委托是把监听器绑定到父容器（也就是你的appBox），利用事件冒泡机制来处理子元素的点击。不管子元素是一开始就有的，还是后来重新生成的，只要点击的是目标元素，就能触发回调。

修改步骤：

1. 删掉原来最后两段绑定事件的代码（allLetters和allSpaces的遍历绑定）
2. 给appBox绑定一次点击事件，内部判断点击的目标是不是我们需要的元素：

// 只需要绑定一次，放在window.onload外面或者里面都行
appBox.addEventListener('click', (event) => {
  const target = event.target;
  // 检查点击的元素是字母块还是空格块
  if (target.classList.contains('letter') || target.classList.contains('emptySpace')) {
    moveLetter(event);
  }
});

这样不管你怎么重新渲染页面，父容器的监听器一直存在，再也不用每次渲染后重新绑定事件了，代码也更简洁。

方案2：调整函数声明顺序（保留原绑定逻辑） #

如果你想继续用原来的“每次渲染后绑定事件”的逻辑，那可以利用let的变量提升特性，先声明moveLetter变量，再定义渲染函数，最后给moveLetter赋值箭头函数：

const appBox = document.getElementById("app");
const convertString = (string) => string.split("");
let stringToArray = convertString("Hello world!");

// 提前用let声明moveLetter变量
let moveLetter;

const printArrayToPage = (string) => {
  appBox.innerHTML = ""; // 先清空容器，避免重复添加元素
  string.forEach((element) => {
    const textBox = document.createElement("div");
    textBox.classList.add(element !== " " ? "letter" : "emptySpace");
    textBox.appendChild(document.createTextNode(element));
    appBox.appendChild(textBox);
  });
  // 渲染完成后绑定事件
  document.querySelectorAll(".letter").forEach(el => el.addEventListener("click", moveLetter));
  document.querySelectorAll(".emptySpace").forEach(el => el.addEventListener("click", moveLetter));
};

// 定义moveLetter的箭头函数
moveLetter = (event) => {
  const targetLetter = event.target;
  const letterToRemove = targetLetter.innerHTML;
  
  if (stringToArray.includes(letterToRemove)) {
    const index = stringToArray.indexOf(letterToRemove);
    stringToArray.splice(index, 1);
  }
  stringToArray.push(letterToRemove);
  
  printArrayToPage(stringToArray);
};

window.onload = () => printArrayToPage(stringToArray);

这里的关键是：let moveLetter会把变量声明提升到作用域顶部，虽然一开始是undefined，但当printArrayToPage在点击后被调用时，moveLetter已经被赋值为箭头函数了，所以不会报错。

不过还是更推荐事件委托的方案，它更高效，也更符合现代前端的事件处理思路～

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