在文章的开头,我们需要了解一下
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>