Question

发生变更事件时发生了什么？触发变更事件的条件是什么？

let i = document.querySelector('input')
i.addEventListener('change', e => console.log(e))
i.dispatchEvent(new Event('change'))//listener will be triggered but radio element will not be selected
i.checked = true // radio element will be selected but listener will not be triggered
i.click() //radio element will be selected and listener will be triggered

<input name="test" type="radio" value="1">
<input name="test" type="radio" value="2">

因此，当用户名义上选择广播时，浏览器做了什么？将checked属性设置为true并调度更改事件？

Answer 1

更改input时（尤其是使用value元素时，将触发一个change事件-因此，如果您读取该值，然后在change调用之后读取它，则这两个值会有所不同。

let i = document.querySelector('input')
i.addEventListener('change', e => console.log(e))
i.checked = true //Nothing happened
i.click() //event object is output

<input name="test" type="radio" value="1">
<input name="test" type="radio" value="2">

您上面的代码不会立即触发该事件，因为您是clicking input-即便如此，由于已经被选择，value不会改变，因此什么都不会发生。如果删除checked = true部分，它将触发，因为当您click元素时，值从未选中（未填充）变为选中（已填充）：

let i = document.querySelector('input')
i.addEventListener('change', e => console.log(e))
i.click() //event object is output

<input name="test" type="radio" value="1">
<input name="test" type="radio" value="2">

变更事件未触发

1 个答案: