访问器属性特性中的get和set方法来实现

  一、需要实现的效果是：

  当在 input 框输入内容时，input 框下方的div标签能实时显示输入的内容。此时在浏览器的控制台获取到的obj.inputText的值就是页面div标签的值。

  结论：页面变，js数据发生改变

  2、当在浏览器的控制台修改obj.inputText的值时，页面的div标签会显示成修改后的值。

  结论：js数据变js监听input值变化，页面发生改变

  二、用到的技术：主要通过ES5中的Object.defineProperty()实现，利用它的访问器属性特性中的get和set方法来实现。

  三、主要步骤：

  1、定义一个对象

  2、利用Object.defineProperty为对象定义一个属性

  3、监听输入框的oninput事件，把用户输入的值赋值给obj对象的inputText属性，调用set方法

  4、inputText的属性值被修改就会触发set函数，然后在set函数中把用户在输入框输入的值赋值给div标签js监听input值变化，就可以实现数据双向绑定了

  四、实现代码如下：

`
Document
 let input = document.getElementsByTagName('input')[0];
 let box = document.querySelector('#box');
 // 定义一个对象
 let obj = {};
 // 利用Object.defineProperty为obj对象定义一个inputText属性
 Object.defineProperty(obj, 'inputText', {
  get() {
return box.innerHTML;
  },
  set(value) {
// inputText的属性值被修改就会触发set函数，然后在set函数中把用户在输入框输入的值赋值给div标签，就可以实现数据双向绑定了
box.innerHTML = value;
  }
 })
 // 监听输入框的oninput事件
 input.addEventListener('input', e => {
  // 把用户输入的值赋值给obj对象的inputText属性，调用set方法
  obj.inputText = e.target.value;
 }); 
 
 
TAGS：标签 js监听input值变化 jq 监听input 值变化 js 监听input回车事件 输入 页面 属性 结论 
 
 !如链接失效请在下方留言。本站所有资源均来源于网络，版权属于原作者!仅供学习参考，本站不对您的使用负任何责任。如果有侵权之处请第一时间联系我们删除，敬请谅解!