<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Object.defineProperty實現雙向綁定</title>
</head>
<body>
<!-- <input type="text" id="txt1">
<input type="text" id="txt2"> -->
<input type="text" id="input">
<span id="span"></span>
</body>
<script>
// 法一： addEventListener
// document.addEventListener('keyup', function (e) { //keyup,當按鈕被松開時觸發該事件
// var str = e.target.value || ""; //獲取當前文本框的值(回車或者點擊觸發)
// //this就是指向當前事件所綁定的元素，而e.target指向事件執行時鼠標所點擊區域的那個元素。
// // value是JavaScript的屬性 val()是jQuery的方法
// //每次觸發DOM事件時會產生一個事件對象（也稱event對象），此處的參數e接收事件對象。而事件對象也有很多屬性和方法，其中target屬性是獲取觸發事件對象的目標，也就是綁定事件的元素，e.target表示該DOM元素，然后在獲取其相應的屬性值。
// document.getElementById("txt1").value = str;
// document.getElementById("txt2").value = str;
// })
// 法二： defineProperty
// Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回此對象。
// 備注：應當直接在 Object 構造器對象上調用此方法，而不是在任意一個 Object 類型的實例上調用。
// 只要給obj.dataBind賦值，就會觸發set方法，只要訪問ob.dataBind，就會觸發get方法
var obj = {};
Object.defineProperty(obj, 'test', {
set: function (newVal) {
document.getElementById('input').value = newVal;
// document.getElementById('span').innerHTML = newVal;
document.getElementById('span').innerText = newVal;
}
});
document.addEventListener('keyup', (e) => {
obj.test = e.target.value;
/*這步操作是調用obj.test.set(e.target.value)*/
})
</script>
</html>