事件偵聽器將在元素更改后停止處理該元素（僅限 JavaScript）

Question

請檢查以下可執行示例代碼...

 var inputform = document.getElementById('input-form'); var form = document.getElementById('message'); var input = document.getElementById('usermsg'); 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; } usermsg.addEventListener('keypress', function(e) { if (e.which == 13 && !e.shiftKey && input.value) { input.value = ''; } });

 <div id="input-form"> <form name="message" action="" id="message"> <textarea name="usermsg" id="usermsg"></textarea> </form> </div> <button onclick="change('div');">Press to div</button> <button onclick="change('form');">Press to form</button>

我正在使用此代碼來檢測用戶何時在元素內單擊

usermsg.addEventListener('keypress', function(e) {
  if (e.which == 13 && !e.shiftKey && input.value) {
    input.value = '';
  }
});

它應該是一個偵聽器，但如果元素發生變化，它就會停止工作，甚至在之后，它又變回原來的形式。

如何防止它僅停止使用 javascript？

Answer 1

好的，這就是答案：

inputform.addEventListener('keypress', function(e) {
  const tgt = e.target;
  if (tgt.id==="usermsg") {
     if (e.which == 13 && !e.shiftKey && tgt.value) {
       tgt.value = '';
     }
  }
});

謝謝你們。