Hey! 👋🏼

Event Listeners

Redi School Munich - Spring 2021

Event Listeners

The event system

MDN: Events

  • HTML Elements can fire events based on user interaction
  • Programs can listen to these events and perform actions based on them

An example


              
            

              document.querySelector("#theButton").addEventListener("click", () => {
                console.log("Button was clicked");
              });

Listening to events

Either with an HTML on[event]attribute:

Or with the addEventListener function:


              element.addEventListener("click", () => { doSomething(); });

The following syntax also works, but isn't recommended, because it would overwrite event listeners previously added the same way:


                element.onclick = function() {
                  doSomething();
                };

Some common event names

  • click fires, when an element is clicked on
  • dblclick fires, when an element is clicked on twice in quick succession
  • mouseover fires, whenever the pointer moves over an element
  • focus fires, when an element is focused using the tab key
  • blur fires, when leaving an input field
  • keydown fires, whenever a keyboard key is being pressed

The Event Object

The event handler receives an object called the event object, containing metadata about the event that was fired.

This object contains information based on the type of event. For example, keyboard events have a key attribute containing the key that was pressed.

Example: Reading out the key that was pressed


              myInput.addEventListener("keydown", (event) => {
                myParagraph.textContent = "Caught keydown event with key " + event.key;
              });

Custom form validation

Javascript can't possibly know all ways of validating any given set of data. That's why the setCustomValidity method exists.

Usage

  • setCustomValidity is a method that exists on every input element
  • When called with any non-empty string, the input field is considered invalid

Example


              
            

              const myInput = document.querySelector("input");
              myInput.setCustomValidity("You can't do this!");
              // The passed string is the message displayed to the user

Usage

    When called with an empty-string, the field is considered valid again.

              
            

              const myInput = document.querySelector("input");
              myInput.setCustomValidity(""); // Valid again

Example

We can combine this method with the blur event to create our own validation logic


              
            

              const myInput = document.querySelector("input");
              myInput.addEventListener("blur", (event) => {
                const valid = checkCustomPreconditions();

                if (!valid) {
                  event.target.setCustomValidity("Custom Preconditions failed");
                } else {
                  event.target.setCustomValidity("");
                }
              });

Questions / Feedback?