Heim  >  Fragen und Antworten  >  Hauptteil

javascript - js用Object.defineProperty做双向数据绑定小问题

我在网上看到的例子:

<input type="text" id="text1" />
<input type="text" id="text2" />



var input1 = document.querySelector("#text1");
var input2 = document.querySelector("#text2");
var data = {};
Object.defineProperty(data, "name", {
  configurable: true,
  get: function(){
      console.log(1111);
      return input1.value
  },
  set: function(newValue){
      console.log(222);
    input1.value = newValue;
    input2.value = newValue;
  }
})
data.name = "sss";
input1.onchange = function(){
  console.log(33333)
  data.name = data.name;
}
input2.onchange = function(){
  input1.value = this.value;
  console.log(data);
}

当我改变input2的值的时候。input1的value会发生变化,这是必然的。但是这时候我打印data。data值竟然也更新了。input2.onchange里 并没有调用data的set啊。input1.value发生改变,也并没有触发input1的onchange啊。那 data的数据的更新,到底是怎么触发的啊?

PHPzPHPz2730 Tage vor583

Antworte allen(3)Ich werde antworten

  • 天蓬老师

    天蓬老师2017-04-11 10:18:36

    楼主沫鸡冻;

    当我改变input2的值的时候。input1的value会发生变化,这是必然的。

    这个时候输出data.name;其实执行的是get方法,也就是输出input1的值。。。

    Antwort
    0
  • 巴扎黑

    巴扎黑2017-04-11 10:18:36

    你这个是因为用js设置input的value,不会触发onchange方法,你可以试试input方法或者加回调吧

    change事件在<input>, <select>, 和<textarea> 元素的value由于用户的输入而发生变化时被触发. 和input事件不同, change事件不会不必要地对于每次value的改变而被触发.

    https://developer.mozilla.org...

    Antwort
    0
  • PHP中文网

    PHP中文网2017-04-11 10:18:36

    自己来实现双向绑定,还有博客

    Antwort
    0
  • StornierenAntwort