监听input的值改变(JavaScript直接赋值)

1. 重写DOM原型

var desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')
Object.defineProperty(HTMLInputElement.prototype, 'value', {
    ...desc,
    set(v) {
        console.log('set',v);
        desc.set.call(this, v)
    }
})

---

Object.getOwnPropertyDescriptor(obj, prop) :
描述:该方法允许对一个属性的描述进行检索。在 Javascript 中， 属性 由一个字符串类型的“名字”（name）和一个“属性描述符”（property descriptor）对象构成
obj: 需要查找的目标对象
prop: 目标对象内属性名称
返回值:如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined

---

Object.defineProperty(obj, prop, descriptor) :
obj: 要定义属性的对象。
prop: 要定义或修改的属性的名称或Symbol
descriptor: 要定义或修改的属性描述符。
返回值:被传递给函数的对象。
查看详细信息

---

2. JavaScript修改值后手动触发对应事件

...赋值操作
// 创建事件, 事件类型可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"
const ev = document.createEvent("HTMLEvents");  
// 定义事件名为change
ev.initEvent("change", false, true);  
// 触发事件
inputEl.dispatchEvent(ev);

---

event.initEvent(type, bubbles, cancelable):
type: 事件的类型。
bubbles: 一个Boolean值，决定是否事件是否应该向上冒泡. 一旦设置了这个值，只读属性Event.bubbles也会获取相应的值
cancelable: 一个Boolean值，决定该事件的默认动作是否可以被取消. 一旦设置了这个值，只读属性Event.cancelable也会获取相应的值