Events You Say? I'm Listening...
Tags: javascript, codenewbie
Published: 2019-07-11 19:48:52

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!
![almighty](https://media.giphy.com/media/3fJlTgnz9210s/giphy.gif)