onChange event not firing when triggered from inline JavaScript

Question

Notice that + button changes value of input, and input not triggering change, input events as expected. But input itself triggers events when changed

Is that intended behavior or i'm doing something totally wrong? Also i would like to note, I would like to see pure JavaScript solution.

Sample demo below:

var input = document.querySelector('#number')
input.onchange = function(event){
  alert('change');
}
input.oninput = function(event){
  alert('change');
}

<button onclick="number.value++">+</button>
<input type="number" id="number" value="0" />

Answer 1

For inputs onchange occurs when focus is lost and not actually when the content is changed, but oninput fires immediately after change is made. and oninput doesn't fire when content is changed via other controls.

so no event will fire when pushing the button as the content is changed via other control and without input and no blur is triggered.

check this link: http://www.w3schools.com/tags/ev_oninput.asp

Definition and Usage The oninput attribute fires when an element gets user input.

The oninput attribute fires when the value of an <input> or <textarea> element is changed.

Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <keygen> and <select> elements.