javascript |
您所在的位置：网站首页 › 表单数据提交时会触发什么事件 › javascript |
|
lerte 说的对，数据双向绑定，不过不用框架也行，只要知道原理；楼主的问题实际上是： 改变了一个对象的属性，怎么去自动触发一个程序，或者访问一个属性，怎么去自动触发一个程序实际上，可以新建另一个访问器属性 _value ，把原来 js 对 value 的操作改为对 _value 属性的操作，这样访问 _value 时，会自动调用 get 函数获取 value 的值，设置 _value 属性时，会自动调用 set 函数设置 value 属性的值，你可以将你的程序绑定在 get/set 函数中，这样就可以监听 js 修改 value 数据的变化；如果直接设置 value 属性为 访问器属性，结果会造成，用户在页面修改了 value，不会调用 set 函数，所以 想了上面的中介 _value，此处感谢@叫我小蓝就行了 的提醒。题主的案例：js: window.onload = function() { let input = document.getElementById('demo'); function oninputCallback() { console.log('oninput event '); } function onchangeCallback() { console.log('onchange event'); } input.addEventListener('oninput', oninputCallback, false); input.addEventListener('onchange', onchangeCallback, false); Object.defineProperty(input, '_value', { configurable: true, set: function(value) { this.value = value; oninputCallback(); onchangeCallback(); }, get: function() { return this.value; } }); };html: 效果 再给个例子，根据数据类型的变化，自动修改类名，demo js: window.onload = function() { let bonusDiv = document.getElementById('bonusDiv'); Object.defineProperty(bonusDiv, 'data-type', { configurable: true, set: function(value) { switch (value) { case 'x1': this.className = 'red'; break; case 'x2': this.className = 'blue'; break; case 'x3': this.className = 'purple'; break; } } }); };html: 效果： |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |