Change event event not fired

Question

what happened when a change event fired? which is the conditions that fired the change event?

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

So when user selecting radio nomally what did browser do? set the checked property to true and dispatch a change event?

score 1 · Answer 1 · answered Apr 16 '19 at 08:55

1

A change event is fired when (particularly with input elements) the value is changed - so if you read the value, then read it after a change call, the two values would be different.

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

Your above code isn't firing the event straightaway because you're clicking the input - and even so, because it's already selected, the value won't change, so nothing will happen. If you remove the checked = true part, it will fire, because the value is going from unchecked (not filled) to checked (filled) when you click the element:

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

answered Apr 16 '19 at 08:55

Jack Bashford

43,180
11
50
79

thank you but i just want to know why the third row does not fire an event – yakou tsuchimikado Apr 16 '19 at 09:04
What do you mean "the third row"? The `i.click()` line? It does fire an event - that's why the initial data comes up, because the radio button was clicked. – Jack Bashford Apr 16 '19 at 09:04
i.checked = true this line. when this line of code runs the radio element has been selected but change event not fired – yakou tsuchimikado Apr 16 '19 at 09:10
Yes - that is an exception, because the `change` event only fires on user input (such as with the `click` line). When the value is manually set, then it doesn't fire. – Jack Bashford Apr 16 '19 at 09:12
Ok, is there any way to fired an change event other than a click() function? – yakou tsuchimikado Apr 16 '19 at 09:33
@yakoutsuchimikado I do not believe so. – Jack Bashford Apr 16 '19 at 09:34

Change event event not fired

1 Answers1