用js操作dom（非用户操作）不触发onchange事件

Question

//body
<button>全选</button>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
 
//js
const btn=document.querySelector('button');
const input=document.querySelectorAll('input');

//添加点击事件,改变选择框的状态
btn.onclick=()=>input.forEach(e=>e.checked=!e.checked) 
//添加change事件,如果改变了输出1
input.forEach(e=>e.onchange=()=>console.log(1))

我直接点击选择框会输出1,但是点击按钮虽然选择框的状态会改变，但是没有输出1，没有触发onchange事件？这是什么原因啊?

Answer 1

就是这么设计的。我也不是很清楚原因，猜测是为了防止事件死循环吧。如果需要事件的话，手动触发 click 事件吧。

Answer 2

解决办法直接调用

btn.onclick=()=>input.forEach(e=>{
e.click()
}) 

如果是addEventListener添加的函数，那么就给函数一个名字，然后直接调用

还是太菜了，补充一点w3网站说明

该事件类似于 oninput 事件。不同之处在于 oninput 事件在元素值改变后立即发生，而 onchange 在元素失去焦点而内容发生改变后发生。另一个区别是 onchange 事件也适用于 <select> 元

所以原因就是由于js操作没有失去焦点，只有变化因此没有触发点击事件

Answer 3

问题的原因：
oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

解决方法：
然后 checkbox 不是应该设置 name 和 value 吗？
这个时候选中的数据变更会直接触发 onchange, JQ 不是可以直接绑定？

Answer 4

这个问题还tm不好处理的。除非你像Vue一样使用Object.defineProperty