Chapter 17

Events

In programming, events are actions or occurrences in a system that the system informs you about so you can respond to them. For example, when you click the reset button it clears the input.

Interactions from the keyboard such as keypresses need to be constantly read to catch the key’s state before it’s released again. Performing other time-intensive computations might cause you to miss a key press. This used to be the input handling mechanism of some primitive machines. A further step up is to use a queue, i.e. a program that periodically checks the queue for new events and reacts to it. This approach is called polling.

The main drawback of this approach is that it has to look at the queue every now and then, causing disruption when an event is triggered. The better mechanism for this is to notify the code when an event occurs. This is what modern browsers do by allowing us to register functions as handlers for specific events.

<p>Click me to activate the handler.</p>
<script>
  window.addEventListener("click", () => {
    console.log("clicked");
  });
</script>

Here, the addEventListener is called on the window object (built-in object provided by the browser) to register a handler for the whole window. Calling its addEventListener method registers the second argument to be called whenever the event described by its first argument occurs.

Some of the common HTML events are mentioned here.

It is common for handlers registered on nodes with children to also receive events from the children. For example, if a button inside a paragraph is clicked, handlers registered on the paragraph will also receive the click event. In case of the presence of handlers in both, the one at the bottom gets to go first. The event is said to propagate outward, from the initiating node to its parent node and on the root of the document.

The event handler can call the stopPropagation method on the event object to prevent handlers further up from receiving the event. This is useful in cases like, you have a button inside a clickable element and you don’t want to trigger the outer element's clickable behavior from a button click.

<p>A paragraph with a <button>button</button>.</p>
<script>
  let para = document.querySelector("p"),
      button = document.querySelector("button");
  para.addEventListener("mousedown", () => {
    console.log("Paragraph handler.");
  });
  button.addEventListener("mousedown", event => {
    console.log("Button handler.");
    event.stopPropagation();
  });
</script>

Here, the mousedown handlers are registered by both paragraph and button. Upon clicking the button, the handler for the button calls stopPropagation, which will prevent the handler on the paragraph from running.

Events can have a default behavior. For example, links navigate to the link’s target upon click, you get navigated to the bottom of a page upon clicking the down arrow, and so on. These default behaviors can be prevented by calling a preventDefault method on the event object.

<a href="https://developer.mozilla.org/">MDN</a>
<script>
  let link = document.querySelector("a");
  link.addEventListener("click", event => {
    console.log("Nope.");
    event.preventDefault();
  });
</script>

Here, the default behavior of the link upon click is prevented, i.e. navigating towards the link's target.