javascript - 注册一个事件以在 javascript 中更改 html 输入值

Question

是否可以注册一个事件来更改 javascript 中的 html 输入值？

我的意思是我有一个输入。当我在其中输入时，会注册一个事件，但是当我通过 javascript 更新其(输入)值时，不会调用 input 事件。这里有什么解决方法吗？

例如，当您在输入中键入内容时，结果文本会更新，但是当您使用按钮(即通过 javascript)清除输入时，input 事件不会注册。

html

<input id="inpt" oninput="updateText()" />
<div id="txtDiv">
  resulting text
</div>
<button id="btn">
Click
</button>

js

const input = document.getElementById("inpt");
input.addEventListener('input', function() {
  const resultingText = document.getElementById("txtDiv");
  resultingText.innerHTML = input.value;
  alet("called");
});

const btn = document.getElementById("btn");
btn.addEventListener('click', function() {
  input.value = "";
});

fiddle .

Answer 1

我发现，如果将事件监听器中的逻辑分离到其自己的函数中，则可以在按下按钮时调用该函数。

const input = document.getElementById("inpt");
input.addEventListener('input', function() {
  changeText();
});

const btn = document.getElementById("btn");
btn.addEventListener('click', function() {
  input.value = "";
  changeText();
});

function changeText() {
  const resultingText = document.getElementById("txtDiv");
  resultingText.innerHTML = input.value;
  alert("called");
}

JS fiddle :https://jsfiddle.net/joabysvt/1/