原生JavaScript：如何避免fetch()后重新绑定事件监听器？

不用每次fetch后重复绑定事件，事件委托是最简洁的方案——利用DOM事件冒泡机制，把监听器绑定到一个不会被替换的父元素上，而不是直接绑在按钮上。这样哪怕按钮被重新渲染，只要它在父元素范围内，事件就能被捕获。

比如你可以把监听器绑在document或者更接近按钮的固定父容器（比如假设按钮都在#button-container里），示例代码改成这样：

document.addEventListener("DOMContentLoaded", function(){
  // 用事件委托绑定点击事件
  document.addEventListener('click', function(e) {
    switch(e.target.id) {
      case 'another_button':
        antoher_function();
        break;
      case 'another_button2':
        antoher_function2();
        break;
      case 'another_button3':
        antoher_function3();
        break;
    }
  });

  // fetch调用不需要再重复绑定事件
  fetch(url, {
    method: 'POST',
    body: data
  })
  .then(response => response.json())
  .then(json => {
    // 这里只管更新DOM，不用管事件绑定
  });
});

如果按钮有共同的类名，还能更简洁：

// 假设按钮都有class="action-btn"，且每个按钮的data-action对应要执行的函数名
document.addEventListener('click', function(e) {
  if(e.target.classList.contains('action-btn')) {
    const action = e.target.dataset.action;
    window[action](); // 前提是函数挂载在全局，或者用对象统一管理函数
  }
});

另外要注意：如果你的fetch是完全替换了包含按钮的父元素，直接绑在父元素上的监听器会失效，这时候就把监听器绑在更上层的固定元素（比如document）就行。

如果不想用事件委托，也可以把绑定事件的逻辑封装成一个函数，每次更新DOM后调用一次，但这种方式不如事件委托高效：

function bindButtonEvents() {
  // 先移除旧监听器再绑定，避免重复触发
  const btn1 = document.getElementById("another_button");
  btn1.removeEventListener("click", antoher_function);
  btn1.addEventListener("click", antoher_function);

  const btn2 = document.getElementById("another_button2");
  btn2.removeEventListener("click", antoher_function2);
  btn2.addEventListener("click", antoher_function2);

  const btn3 = document.getElementById("another_button3");
  btn3.removeEventListener("click", antoher_function3);
  btn3.addEventListener("click", antoher_function3);
}

document.addEventListener("DOMContentLoaded", function(){
  bindButtonEvents();

  fetch(url, {
    method: 'POST',
    body: data
  })
  .then(response => response.json())
  .then(json => {
    // 更新DOM后调用绑定函数
    bindButtonEvents();
  });
});

这种方式需要先移除旧监听器，否则重复绑定会导致同一个点击触发多次函数执行，所以还是事件委托更省心。

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