参考
https://www.cnblogs.com/yuqing-o605/p/6790709.html?utm_source=itdadao&utm_medium=referral
https://blog.csdn.net/orangecsy/article/details/79759663
直接看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb"></span>
<script>
var obj = {};
Object.defineProperty(obj,'hello',{
set:function(val){
document.getElementById('bb').innerHTML = val;
document.getElementById('aa').value = val;
}
});
document.getElementById('aa').onkeyup = function(e){
obj.hello = e.target.value;
};
obj.hello = "";
</script>
</body>
</html>
原理是通过set来对事件进行响应,很神奇,不过功能有限,今天偶然看到的,先不深究,以后看相关源码的时候再说
又看了下第二篇参考文章,觉得写得不错,摘录一下
下面这些代码是解决第一种写法里面,obj并没有保存实际的val的问题
<input type="text" id="input">
<div id="show"></div>
<script>
function defineProperty(obj, attr){
var val;
Object.defineProperty(obj, attr, {
get: function () {
return val;
},
set: function (newValue) {
if (newValue === val){
return;
}
val = newValue;
document.getElementById("input").value = newValue;
document.getElementById("show").innerHTML = newValue;
}
});
}
var obj = {};
defineProperty(obj, "txt");
document.getElementById("input").addEventListener("keyup", function(e){
obj.txt = e.target.value;
})
</script>