HTML5 INPUT type='number' - distinguish between focus and value-change mouse clicks

Question

In the HTML5 INPUT type='number' the user can change the value by clicking on up/down arrows that are part of the INPUT box. The user might also click in the box for focus or for editing its contents.

Is there any easy way to distinguish between these two activities in the click trigger?

---

from @cvsguimaraes answer, which better demonstrates the theory.

using his methodology, here is my finished(?) version. the purpose: make sure regular change triggers are called when using +/- to change data.

// input/mouseup triggers to call change from +/- mouse clicks
// want to wait 500ms before calling change in case successive clicks
render.inputCh = false;
render.inputCt = 0;
render.inputFn  = function(e) {
    render.inputCh = true;
}
render.mouseupFn  = function(e) {
    if( render.inputCh ) {
        render.inputCh = false;
        render.inputCt++;
        setTimeout( next, 500 );
    }       
    function next() {
        render.inputCt--;
        if( render.inputCt ) return;
        var change = document.createEvent("Event");
        change.initEvent('change',true,true);
        e.target.dispatchEvent(change);
    }
}

// using input/mouseup triggers
document.getElementById('number').addListener('input',render.inputFn,true);
document.getElementById('number').addListener('mouseup',render.mouseuptFn,true);

// normal change trigger - will be called normally and via +/- mouse click
document.getElementById('number').addListener('change',changeFn,false);

on chrome it's working flawlessly so far except that when you remove focus from the ITEM the change trigger will kick in again. I solved this by having a low level change trigger that stops propagation if the previous change call was from the mouseup .

Answer 1

Here is a demo of how you can capture and analyze which events change the input and in what order.

html:

<input type="number" id="number" />

script:

var input = document.getElementById('number'),
    events = [
        "click",
        "mousedown",
        "mouseup",
        "focus",
        "change",
        "input",
        "keydown",
        "keypress",
        "keyup"
    ];
events.forEach(function(ev) {
    input.addEventListener(ev, function() {
        console.log(ev, ' => ', input.value);
    }, false);
});

Answer 2

When the user change the value by clicking on up/down arrows the input event is triggered conveniently between mousedown and mouseup .

 const input = document.getElementById('age') const on = (ev, fn) => input.addEventListener(ev, fn) const status = document.getElementById('status') const write = (...txt) => status.innerText = txt.join() let lastEv = 'none'; on('keypress', () => lastEv = 'keypress') on('mousedown', () => lastEv = 'mousedown') on('input', () => { if(lastEv == 'mousedown') write('changed from mouse', input.value); if(lastEv == 'keypress') write('changed from keyboard', input.value) });

 <input id="age" type="number" value=30> <br> <div id="status"></div>