Browser applications use event handlers to respond to actions such as clicks and mouse movement. addEventListener registers a handler with the browser for a chosen event. section 2.3 section 2.3.2
Why use addEventListener instead of assigning an event property?
- An event property such as onclick holds one handler, so assigning another can overwrite the previous one. addEventListener lets you register multiple handlers and specify an event type and function. 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 separate handlers for mousemove and click on the page body; each adds a labeled message to a list. section 2.3.2
