Событие изменения события не сработало

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">

Итак, когда пользователь выбирает радио обычным образом, что делает браузер?установить для свойства selected значение true и отправить событие изменения?

Answer 1

Событие изменения вызывается, когда (особенно с элементами input) изменяется value - поэтому, если вы читаете значение, а затем читаете его после вызова 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">