<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雙向綁定</title>
</head>
<body>
手寫一個簡單雙向綁定<br/>
<input type="text" id="model"><br/>
<div id="modelText"></div>
</body>
<script>
var model = document.querySelector("#model");
var modelText = document.querySelector("#modelText");
var defaultName = "defaultName";
var userInfo = {}
model.value = defaultName;
Object.defineProperty(userInfo, "name", {
get: function () {
console.log("你來拿值啦！");
return defaultName;
},
set: function (value) {
defaultName = value;
model.value = value;
console.log("你來修改值啦！");
console.log(value);
modelText.textContent = value;
}
})
userInfo.name = "new value";
var isEnd = true;
model.addEventListener("keyup", function () {
if (isEnd) {
userInfo.name = this.value;
}
}, false)
//加入監聽中文輸入事件
model.addEventListener("compositionstart", function () {
console.log("開始輸入中文啦");
isEnd = false;
})
model.addEventListener("compositionend", function () {
isEnd = true;
console.log("結束輸入中文啦");
})
</script>
</html>
