Event Listener Lab

Attach handlers with addEventListener for more than one event type.

Live controls

Hover this zone (mouseover / mouseout)
Events will appear here.

No events yet.

Important HTML

Each control listens for a different event type in JavaScript.

<button id="tipoff" type="button">Tip off (click)</button>
<input id="player-name" type="text">
<div id="hover-zone">Hover this zone</div>

Important JavaScript

First argument is the event name; second is the function to run.

tipoff.addEventListener("click", function () {
  console.log("Tip off clicked");
});

nameInput.addEventListener("input", function () {
  console.log("Typing: " + nameInput.value);
});