JS to realize bidirectional data binding

Implement a two-way data binding ,input While the value changes ,<span> Label synchronization input The content of .

<div>
    <input type="text" id="input_1">
    <span id="span_1"></span>
</div>
<script type="text/javascript">
    var obj = {
    };
    Object.defineProperty(obj, 'test', {
    
        set: (newVal)=>{
    
            //document.getElementById('input_1').value = newVal;
            document.getElementById('span_1').innerHTML = newVal;
        },
        //  There is no need for get Method 
        get: ()=>{
    
            alert(' The data was read ')
        }
    });
    document.addEventListener('keyup', (e)=>{
    
        obj.test = e.target.value;      // Event monitoring ,input The input field changes , be obj.test attribute ( Equivalent to an intermediary ) It will change , Then change span Content of the label 
    })
</script>

Screenshot ：

Reference blog ： Reference resources 1、 Reference resources 2