Browser applications become interactive by registering functions that the browser runs when events such as clicks or key presses occur. section 2.3
Two registration approaches are shown:
- Assign a function to a special property such as onload or onclick. This is straightforward, but allows only one handler for a particular event, so a new assignment can overwrite an earlier one. section 2.3.2
- Call addEventListener with an event type and handler function. It allows multiple handlers for the same event. section 2.3.2
Listing 2.3. Registering event handlers
<script>
document.body.addEventListener("mousemove", function() { #A
var second = document.getElementById("second");
addMessage(second, "Event: mousemove");
});
document.body.addEventListener("click", function(){ #B
var second = document.getElementById("second");
addmessage(second, "Event: click");
});
</script>
This example registers mousemove and click handlers on the document body; each adds an event message to a list. section 2.3.2
