HTML5 input events test

HTML

<input id="numPeople" type="number" min="0" value="" placeholder="Pick a number" />
<button onclick="myFunction()">Click me</button>
<div id="result"></div>

CSS

input {
    font-size: 1.2em;
    border-radius: 4px;
    padding: 4px;
}

JavaScript

/* Event test with html5 input[type="number"] 
   by @girlie_mac

   This quick demo shows that it is ideal to use 'input' event for better user-experience over 'change' (which requires a user to blur the field once), or 'keyup' event (which doesn't fire when you use the up/down arrow to change the values).

    Try this on the browser that supports the html5 input attributes and the html5 oninput event, such as Chrome.

*/
function myFunction(){
alert('hii');
}
var n = document.getElementById("numPeople"),
   r = document.getElementById("result");
var btn =document.getElementById("btn");

n.addEventListener("keyup", function(e) {
    r.innerHTML += "keyup event triggered <br/>";
}, false);

n.addEventListener("change", function(e) {
    r.innerHTML += "change event triggered <br/>";
}, false);