🟨JavaScript event handling

listening and responding to (user) interaction (the "conversations")

The second that a user lands on a webpage on a browser, the JavaScript engine sits there "listening" for the user to interact with that webpage and that webpage's components, either through a:

• keypress (or combination of keypresses)

• mouse click

• mouse move

• swipe or touch or shake (if using a mobile device)

• resize of the browser

• ...and anything that has to do with interaction!

There even exist event listeners for when the page loads, so that "things" "can happen" when the user refreshes the browser on that page!

Using on... events

Each querySelector has properties commonly called listeners that

• detect (listen to) any events, such as:

  • a mouse-click (click)

  • a change in browser window size (resize)

  • a page load (load)

• in order to handle (respond to) them

  • the detection gets prefixed with on so that for any click event, the property is called onclick

We would essentially assign an event handler function (turnButtonGreen() in the example below) that will happen when an event triggers:

let element = document.querySelector('button')

function turnButtonGreen() {
    element.style.backgroundColor = 'green'
    element.style.color = 'white'
}

// event listener <- event handler
document.querySelector('button').onclick = turnButtonGreen;

Generalizing the last line above:

// event listener <- event handler
element.onevent = eventHandlerFunction

Using addEventListener

Another way of writing the event handler uses the addEventListener(eventType, callback) format:

let eventTarget = document.getElementbyId('targetElement')

let eventType = 'click'
let eventHandler = function() {
    // the thing(s) that happen(s) when #targetElement gets clicked
    // we can even use this as a "handler of handlers"
    // by calling several functions in here
}

eventTarget.addEventListener(eventType, eventHandler)

For anyone who has used jQuery (a JavaScript-simplifier library):

• $(element) replaceseventTarget

• on replaces addEventListener

...and suddenly the syntax looks very familiar :)

load versus DOMContentLoaded

A subtle difference exists between the eventTypes of load and DOMContentLoaded:

• load waits for the entire page to load: images, stylesheets, scripts, etc.

• DOMContentLoaded waits only for the HTML to load (ignoring the other non-DOM things)

One application of this involves having a "loading" image while the page loads, which then changes into another image after the DOM has settled:

if (document.readyState === "loading") {
  console.log("DOM is currently showing the placeholder image")
  document.addEventListener("DOMContentLoaded", changeImage)
} else {
  console.log("DOM has loaded and has changed the placeholder image")
  changeImage() // a function elsewhere in the code that changes the image
}

Using removeEventListener

Instead of addEventListener removing an event listener is simply removeEventListener

eventTarget.removeEventListener(eventType, eventHandler) 

A list of all eventTypes

There exist events for the window, the mouse, the keyboard and as well as many input and output devices listed on the following page:

UI Eventsiliakan