js更改input文本框的value值，无法触发input的onChange，onInput事件，解决方案_在js中将textbox组件的value 值设置为空, 使用input监听不到这种变化, 是用什么-优快云博客

本文介绍了一种通过Object.defineProperty监听DOM元素值变化的方法。利用这种方式可以实现在文本框值改变时触发相应事件，适用于需要实时响应输入变化的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在文章的开头，我们需要了解一下

change: 当元素的值发生改变、文本框失去焦点（无法实时更新）会触发 change 事件。

input: 当文本框的值发生改变、存在焦点时（实时更新），会触发 input事件。

那么什么样的环境会触发我们的标题行为呢？

<input id='inp'/>
<script>
var inp = document.getElementById('inp')
// 首先要了解的是  此时变更value值是无法触发change和input事件的
inp.value = '123'
</script>

这个时候我们想要在文本框变动时发生一系列操作，如变更其他文本框的值，发送ajax请求

这个时候我们就可以用到Object.defineProperty来监听这个元素，当dom元素的某个属性值发生变化时触发一系列的事件

<input id='inp'/>
<script>
var inp = document.getElementById('inp')
// 我们不能直接监听value属性，因为如果直接监听value属性
// 赋值时会造成死循环
// 在这里我监听的是newvalue
Object.defineProperty(inp, 'newvalue', {
 // configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
  configurable: true,
  set: function (newvalue) { // newvalue监听的属性表示变更的值
    this.value = newvalue // this代表绑定的dom元素.value 将newvalue赋给value
    // 下方触发事件，发起请求，做一系列想做的操作
    // ······
  },
  get: function () {
    return this.value
  },
})

// 这个时候我们不给value赋值  而是去给newvalue值赋值，从而实现事件的监听触发一系列事件
inp.newvalue=111
//这个时候value的值也会变成111 我们就可以在set方法内写入一系列的触发方法
</script>