Events You Say? I'm Listening...

HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.

Its like a Call and Response, or an Action and Reaction.

Event listeners are just stated responses to a stated action.

You can attach event listeners to HTML elements to perform certain actions when necessary.

Common event listeners

• DOM Content Loaded - waits to run the script until the page loads
• On click - performs a function when the user clicks an element
• Submit - performs a function when a user submits a form

Event listeners can be written like so:

Element.addEventListener ( event , function )
Element.addEventListener(event, () => {} )

Event Listeners can be really helpful with simple UI/UX tasks such as clicking on elements, scrolling over or submitting a form!

Event Listeners allow you to not only change the color of a button when you click it, they have the power to handle and execute functions behind the scenes.

For Example, when creating a JavaScript in browser game, how are you gonna get the user input to actually control anything?

You use event listeners! You can use keyup keydown keyleft and keyright to execute functions when a user hits the arrow keys!

Element.addEventListener("keyup", () => { jump() };

This alone opens up browser pages to a whole new list of possibilities of interactivity! All without refreshing the page!

Other more complex event listeners can be used for anything from finding the coordinates of your cursor on the page, seeing if a user is holding down a key, to finding out how many times you clicked the mouse in a certain area.

Event Listeners have great features too like:

You can add many events to the same element without overriding existing events

 let box = document.getElementById("test-box");

box.addEventListener("click", () => {
 box.textContent = "I Just Got Clicked!";
});

box.addEventListener("mouseover", () => {
 box.style.color = "red";
});

You can fire off a function when a user resizes their window

window.addEventListener("resize", () => {
  document.getElementById("box").textContent = "I'm getting claustrophobic already!";
});

You can pass parameters to functions called in event listeners for more specific reactions or if the action requires input

function sum(a, b) {
 return a + b;
}

let a = 2
let b = 3

box.addEventListener("submit", () => {
 sum(a,b)
});

Theres also an optional third argument when creating an event listener called useCapture. Its a boolean value referring to the hierarchy of events for elements within the same parent element.

Element.addEventListener(event, function, true);
Element.addEventListener(event, function, useCapture);

By default this is false, and uses bubbling to state that the inner most element's event is handled first and then the outer.

capturing is the opposite, the outer most element's event is handled first and then the inner

These Event Listeners open up so many doors to interactivity with a site. Without the Action and Reaction of Listeners, we’d all just be maneuvering static pages or refreshing the page every time you like a post!

JavaScript Superpowers!