真正的原生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一样的数据双向绑定功能