最近工作中遇到一个问题：监听input框的值的变化，当js改变input框的值时无法触发其监听事件。
查阅资料后得知，监听事件都是监听某种操作的，如果没有发生这种操作，这个事件肯定不能被触发。
比如下面的代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<input type="text" value="1" id='inputbox'/>
<button id="plus">+</button>
<script>
let inputbox = document.getElementById('inputbox');
let val = parseInt(inputbox.value);
inputbox.addEventListener('change',function(){
console.log('input 的 value 值改变啦！');
});
// js改变input的value值
document.getElementById('plus').onclick = function(){
val++;
inputbox.value = val;
}
</script>
</body>
</html>
我们用change来监听input的value值变化。
当点击button的时候，控制台并没有打印任何信息，说明change监听事件并未被触发。当我们手动再input框中改变值的时候，事件就被触发了。
如何使js改变其值的时候，监听事件也能被触发呢？
- 若是jQuery，有trigger方法，请自行百度之
- 原生JavaScript 指路大神 https://segmentfault.com/a/1190000019253353
网友评论