JavaScript中元素替换后绑定的Event listener失效如何纯JS解决

问题原因 #

你绑定事件监听器的对象是初始化时获取的#usermsgDOM节点，调用inputform.innerHTML = content替换内容时，原有节点会被直接销毁，后续重新插入的同名id元素是全新的DOM节点，原有监听器不会自动关联到新节点上，因此会失效。

解决方法 #

推荐优先使用事件委托方案，不需要每次替换DOM后重新绑定监听器，一劳永逸：
把监听器绑定到永远不会被替换的父级元素#input-form上，通过事件冒泡判断触发事件的目标是否为#usermsg即可：

// 直接给外层固定父元素绑定事件
document.getElementById('input-form').addEventListener('keypress', function(e) {
  // 判断触发事件的元素是不是你要监听的usermsg
  if (e.target.id === 'usermsg' && e.which == 13 && !e.shiftKey && e.target.value) {
    e.target.value = '';
  }
});

如果不想用事件委托，也可以选择每次替换DOM后重新绑定监听器，注意要把监听函数提取为命名函数，避免重复绑定：

var inputform = document.getElementById('input-form');

// 把监听逻辑提取为独立函数
function handleKeypress(e) {
  if (e.which == 13 && !e.shiftKey && this.value) {
    this.value = '';
  }
}

function change(value) {
  const form =`
    <form name="message" action="" id="message">
      <textarea  name="usermsg" id="usermsg"></textarea>
    </form>`;
  const div = `
    <div id="message">
      <div id="usermsg"></div>
    </div>`;
  var content = value == "div" ? div : form;

  inputform.innerHTML = content;
  // 替换完DOM后，重新获取新的usermsg元素绑定监听器
  const newUsermsg = document.getElementById('usermsg');
  if (newUsermsg) {
    newUsermsg.addEventListener('keypress', handleKeypress);
  }
}

// 初始化的时候也绑定一次
document.getElementById('usermsg').addEventListener('keypress', handleKeypress);

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