An event listener is an object that executes code for an event
An event listener observe a specific event and consists of:
var button = document.getElementById("the-button");
button.addEventListener("click", function () { console.log("Stop Pocking me !"); }, false);
<button id="the-button">Poke ?</button>
General rules:
This example demonstrates this rules.
var button = document.getElementById("startButton");
// an listener with a callback
button.addEventListener("click", function () { addOutputAfter("1 - Callback") }, false);
// the first handler definition (it will not print because the definition is overwritten with another definition later)
button.onclick = function () { addOutputAfter("2 - Event Handler First definition (idl way)"); };
// another listener
button.addEventListener("click", function () { addOutputAfter("3 - Callback") }, false);
// a second handler definition that will overwrite the first one
button.setAttribute("onclick", "addOutputAfter('4 - Event Handler last definition (on attribute)')");
<button id="startButton">Start Demo</button>
<button id="clearButton">Clear</button>
<div id="output"></div>
The official order definition: The order of event listeners for a particular event type will always be:
addEventListener(type, callback, options)
removeEventListener(type, callback, options)