Software Dev Update #13: DOM Events

#javascript #webdev #beginners

In this update we are going to dig deeper into The DOM and discuss events. MDN actually has a great introduction to the topic and I recommend checking it out alongside my post.

DOM Events

Events 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.

<!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: Specifies some script to run when the element is clicked.

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: Sets up a function that will be called whenever the specified event is triggered.

const button = document.querySelector('h1');

button.addEventListener("click", () => {
    alert("You clicked me!")
})

Exercise: Events and the keyword This
Keyboard Events & Event Objects: The Event object is automatically passed in whenever we use a callback and it contains information about the object. Key value is used if you want the actual key letter that was pressed. Code value is used for the key's physical location and is not language specific. (WASD for gaming or something similar)

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 & Prevent Default: 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
Input & Change 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 will stop the event bubbling.
Event Delegation: 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.

Week In Review

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!