Software Dev Update #13: DOM Events
Tags: javascript, webdev, beginners
Published: 2022-05-25 13:01:31

![night event people celebrating](https://i.imgur.com/Uebttrf.jpg)

In this update we are going to dig deeper into The DOM and discuss events. MDN actually has [a great introduction](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events) to the topic and I recommend checking it out alongside my post.

---

##DOM Events##

[Events](https://developer.mozilla.org/en-US/docs/Web/API/Event) are the key to creating any sort of interactive websites that do anything in response to what users are doing.

- [Inline Events](): Are written directly in the HTML element we can add an attribute called "onclick="". There are others such as onfocus, onpause, ondrag, and more. This isn't the recommended
way to add JS to HTML elements but it is an option. Also note the functionality only applies to the one HTML element and would need to be coded for every one you want to do that function/action.
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Events</title>
</head>
<body>
    <h1>Inline Events</h1>
    <button onclick="alert('You clicked on me!'); alert('Stop clicking me!')">Click Me!</button>
</body>
</html>
```
- [onclick](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/onclick): Specifies some script to run when the element is clicked.
```javascript
function scream(){
    console.log("AHHHH!");
    console.log("I wasn't expecting that!");
}

btn.onmouseenter = scream;

document.querySelector("h1").onclick = function(){
    alert("You clicked the h1!");
}
```
- [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener): Sets up a function that will be called whenever the specified event is triggered.
```javascript
const button = document.querySelector('h1');

button.addEventListener("click", () => {
    alert("You clicked me!")
})
```
- _Exercise: Events and the keyword This_
{% codepen https://codepen.io/realnerdethan/pen/poaeWax %}

- [Keyboard Events](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) & Event Objects: The Event object is automatically passed in whenever we use a callback and it contains information about the object. [Key value](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) is used if you want the actual key letter that was pressed. [Code value](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values) is used for the key's physical location and is not language specific. (WASD for gaming or something similar)
```javascript
document.querySelector('button').addEventListener('click', (event) => {
    console.log(event);
})

const input = document.querySelector('input');
input.addEventListener('keydown', (event) => {
    // console.log("Key Down")
    console.log(event);
    console.log(`Key: ${event.key}`);
    console.log(`Code: ${event.code}`);
})

//We can also look at the window for key presses and not just an input
// window.addEventListener('keydown', (event) => {
//     console.log(event.code);
// })
```
- [Form Events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) & [Prevent Default](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault): The default action of a form can be set in HTML using action="". The default action of a form is to submit whatever data you input to the location that you set using action="" and take you to that new page. This can be overridden with the method event.preventDefault
{% codepen https://codepen.io/realnerdethan/pen/jOZBGjX %}

- [Input](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) & [Change](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) Events: The input event triggers when the value of an **input**, **select**, or **textarea** element has been changed. The change event is triggered for **input**, **select**, and **textarea** elements when an alteration to the element's value is committed by the user but will not necessarily happen for each alteration to an element's value depending on the kind of element being changed and the way the user interacts with the element

- Event Bubbling: When a nested event inside another event is triggered, it will trigger parent event(s) as well. Using [.stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) will stop the event bubbling.
{% codepen https://codepen.io/realnerdethan/pen/qBxrVBa %}

- [Event Delegation](https://www.geeksforgeeks.org/event-delegation-in-javascript/): We can add an event listener to an element that is a parent to the element we want it to apply to. This ensures the children elements will always have access to the event listener, even if they are created after the page has loaded.
{% codepen https://codepen.io/realnerdethan/pen/jOZBaEd %}


##Week In Review##
![night resturant](https://i.imgur.com/rF7uZQD.jpg)
That wraps up the DOM specific sections of the bootcamp and I hope makes some topics clearer, especially event bubbling and delegation. I provided examples because sometimes seeing it in action is more beneficial that reading the definition!

[Bootcamp](https://www.udemy.com/course/the-web-developer-bootcamp/) lessons completed: 272/579

---
I hope you enjoyed the read!

Feel free to follow me on [GitHub](https://github.com/RealNerdEthan), [LinkedIn](https://www.linkedin.com/in/ethan-goddard-a4376952/) and [DEV](https://dev.to/realnerdethan) for more!