真正的原生JS数据双向绑定(实时同步)

真正的原生JS数据双向绑定(实时同步)

接触过vue之后我感觉数据双向绑定实在是太好用了，然后就想着到底是什么原理，今天在简书上看到了一位老师的文章

js实现数据双向绑定

然后写出了我自己的代码

window.onload = function () {
var obj_1 = document.getElementById('input_1');
var obj_2 = document.getElementById('input_2');
obj_1.addEventListener('keyup', modelToView);//主要就是这个监听事件
var model = new Object(null);
Object.defineProperty(model, 'user', {
set: function (value) {
user = value;
obj_2.value = value;
},
get: function () {
return user;
}
})
function modelToView() {
model['user'] = obj_1.value;
}
}


大家注意到第三行addEventListener("keyup","modelToView")这里，原博主写的事件是'blur',即失去焦点事件，我打出来之后发现不能实现实时同步，因为需要将焦点取消掉。

于是就上网搜了一些事件，发现了keyup这个事件，虽然不明白和press&down有什么区别，但是这个事件却可以完美的实现像vue一样的数据双向绑定功能