通过Object对象的defineProperty方法监听属性值是否改变,原理解析如下
let ipt = document.querySelector('input');
let msg = document.querySelector('h3');
let obj = {};
Object.defineProperty(obj, 'key', {
// 重写get方法,让它获取input的值
get() {
return ipt.value;
},
// 重写set方法,让input和msg的值等于obj.key
set(val) {
ipt.value = val;
msg.innerHTML = val;
}
});
ipt.addEventListener('keyup', function (e) {
// 监听键盘事件,输入后把input的值赋值给obj.key
obj.key = e.target.value;
})