这可以通过添加带有自定义setter的自定义属性来实现。这样地：

// Get the input
var input = document.getElementById("input")

// Create the class
class inputElement {
  constructor(element) {
    this.element = element

    // For when the user changes the input
    this.element.addEventListener("input", this.edited)

    // For when JS changes the input
    Object.defineProperty(this, "value", {
      get() {
        return this.element.value
      },
      set(val) {
        this.element.value = val
        this.edited()
      }
    })
  }

  // Runs on edit
  edited() {
    alert("This was edited!")
  }
}

// Create a new object for the element
input = new inputElement(input)

// Example of changing the input's text
function addText() {
  input.value += "Hello world!"
}

Text:<br>
<input type="text" id="input">
<br><br>
<button onclick="addText()">Add Text</button>

这将创建一个具有 getter 及 setterr 因此，当它被javascript或用户更改时，它将运行该函数。只需使用该元素创建一个新类并更改已编辑的函数！
当 addFunction 按下按钮，它运行js设置值。

假设您有一个如下所示的输入元素：

<input type="text" id="myInputElement"/>

然后，您可以查询选择元素的id属性，使用javascript在dom中查找该元素，并将其存储在变量中

var inputElement = document.querySelector("#myInputElement");

之后，您可以通过对其应用事件侦听器来检测更改，如下所示：

inputElement.addEventListener("change", function(e) {
    // your code
});

在回调函数中，您可以执行任何您喜欢的操作，只有在输入发生更改时才会调用此函数，例如，您可以使用自动传递给回调函数的事件参数记录当前值：

inputElement.addEventListener("change", function(e) {
    console.log(e.currentTarget.value);
});

这就是它的基本要点：）