纯 JS 中的 .change() - Javascript

在纯JS编程中，.change()是很常见的函数，它用于检测dom元素的值是否被改变，并触发相应事件。这个方法用于所有的表单元素，包括文本框、单选按钮、复选框、下拉框等等。

语法

element.addEventListener('change', function() {
  // 这里是执行的代码
})

参数

• change - 必须，指定发生改变时要触发的事件
• function - 必须，指定改变时执行的函数

示例

<input type="text" id="myInput">

<script>
  const input = document.getElementById('myInput');
  
  input.addEventListener('change', function() {
    console.log('input的值已经改变了！');
  })
</script>

在这个示例中，当用户改变文本框的值时，控制台将输出“input的值已经改变了！”。这就是.change()事件的工作原理。

注意事项

• .change()只能检测用户直接交互操作导致的值改变，例如用户手动修改文本框的值、选择下拉框等等。如果是通过JavaScript代码修改元素的值，则不会触发该事件。
• .change()不适用于所有的元素，例如<div>、<span>等，这些元素并没有用户交互改变值的机会。
• .change()的事件类型只能在元素节点上使用，不能在webAPI上使用。

结论

.change()是一个非常实用的函数，可以帮助我们监测用户的交互操作，进而进行一些业务逻辑的处理。但需要注意的是，并不是所有的元素和方式都可以使用该函数，需要具体情况具体分析。