双向数据绑定原理（原生js实现双向数据绑定）

最新推荐文章于 2025-10-05 15:06:03 发布

原创最新推荐文章于 2025-10-05 15:06:03 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#双向数据绑定 #双向绑定 #js实现双向数据绑定 #原生双向绑定 #双向绑定原理

补充知识点专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript通过定义对象属性的setter方法来监听输入框值的变化，并同步更新到页面元素中的技术实现。当用户在输入框中输入内容时，会触发keyup事件，从而将输入的内容同时显示在另一个页面元素中。

html代码：

<input type="text" id="a">
<div id="b"></div>

js代码：

    var obj = {};
    Object.defineProperty(obj,'hello',{
        set:function (newVal) {
            document.getElementById('a').value = newVal;
            document.getElementById('b').innerHTML = newVal;
        }
    });
    document.addEventListener('keyup',function (e) {
        obj.hello = e.target.value;
    })