JavaScript: DOM Manipulations

Events

Event

Examples:

• click
• dblclick
• keydown
• keyup

More events: w3schools: HTML DOM Events

Handler

A function that runs in case of an event.

3 methods to assign event handlers:

• HTML attribute
• DOM property
• Add event listener

Method 1: Event as an HTML attribute

HTML

<!-- Function call -->
<button onclick="funcName()">Click me</button>

<!-- Method call -->
<button onclick="alert('Hi')">Click me</button>

Example:

<!-- HTML -->
<button onclick="alert('Hello from Button 1')">Button 1</button>

Button 1

<button id="idName">Click me</button>

const elName = document.querySelector("idName");

<!-- Function name -->
elName.onclick = funcName;

<!-- Function described on spot -->
elName.onclick = () => {alert("Hi")};

<!-- HTML -->
<button id="button2">Button 2</button>

// JavaScript
const button2 = document.querySelector("#button2");
button2.onclick = () => {alert("Hello from Button 2")};

Button 2

Event Listener

addEventListener()

HTML

<button id="idName">Click me</button>

JavaScript

const elName = document.querySelector("idName");

<!-- Function name -->
elName.addEventListener("click", funcName);
elName.removeEventListener("click", funcName);

<!-- Function described on spot -->
elName.addEventListener("click", () => {alert("Hi")});

Example:

<!-- HTML -->
<button id="button3">Button 3</button>

// JavaScript
const button3 = document.querySelector("#button3");
button3.addEventListener("click", () => {alert("Hello from Button 3");});

Button 3

removeEventListener()

• removeEventListener() can remove functionName that is previously added using addEventListener().
• It only works when function is addressed using a name in the addition. Removal is done by addressing this name.
• removeEventListener() can't remove function description. Because it's not an entity.

Event listener with function callback that refers itself

JavaScript

elName.addEventListener("click", function (e) {codeblock});
elName.addEventListener("click", (e) => {codeblock});

• function (e) here is a callback from addEventListener.
• e is for "event": e here is an object that references the event itself. Within this object we have access to many properties and functions. For examples:
  • which mouse button or key was pressed
  • information about the event's target (the DOM node/element that was clicked)
• this = e.target = How to address event's target element elName

Example:

<!-- HTML -->
<button id="button4">Button 4</button>

// JavaScript
const button3 = document.querySelector("#button4");
button4.addEventListener("click", () => {alert("Hello from Button 4");});
button4.addEventListener("click", (e) => {alert(`This is an ${e}`);});
button4.addEventListener("click", function (e) {
    alert("Your button will turn pink.");
    e.target.style.background = 'pink';
    this.textContent = "Pink Button";
});

// Note that this = e.target = addresing button4

Button 4

Selector All

Using querySelectorAll() to create a group of nodes

Group of nodes

HTML

<div id="divName">
    <button id="button1">Click 1</button>
    <button id="button2">Click 2</button>
    <button id="button3">Click 3</button>
</div>

JavaScript

const groupName = divName.querySelectorAll("button");

groupName.forEach((member) => {
    member.addEventListener("click", (e) => {
        alert(member.id);
        e.target.style.background = "pink";
    });
});

Example:

<!-- HTML -->
<div id="container2" style="border: 3px solid silver; padding: 1rem;">
    <p>Inside container2</p>
    <button id="button5">Button 5</button>
    <button id="button6">Button 6</button>
    <button id="button7">Button 7</button>
</div>
<p>Outside container2</p>
<button id="button8">Button 8</button>

// JavaScript
const group = container2.querySelectorAll("button");
group.forEach(btn) = > {
    btn.addEventListener("click", (e) => {
        alert(`You pressed ${btn.id}`);
        e.target.style.background = "pink";
    });
});

Inside container2

Button 5 Button 6 Button 7

Outside container2

Button 8

Event capture, propagation, and bubbling

Check out WesBos video on the topic: Youtube: JS Event Capture, Propagation, and Bubbling

An element is contained inside their parents elements. It could be directly the body, or could be deeply nested within a structure of elements. When we clicked an element in a webpage, really we actually also clicked on all those ancestor elements wrapped around it. We don't usually see this effect because in most use, we don't attach an event listener to those wrapping elements. This is bubbling concept. The browser see the click not just in the very element, but it is bubbling up. It ripples all the way to the outter most element. To the top of the document.

<body>
    <div class="one">
        <div class="two">
            <div class="three">
            </div>
        </div>
    </div>
</body>

<script>
    const divs = document.querySelectorAll("div");
    function logText(e) {
        console.log(this.classList.value);
    }
    divs.forEach(div => div.addEventListener("click", logText));
</script>

How does it actually work in Javascript/modern browser?

Capturing in

The browser is first doing what is called capture. When you click on the element, it will ripple down from the outter most element inward all the way to the bottom or inner most element, capturing all the events.

body > div 1 > div 2 > div 3

At that moment, the events are not fired yet. Just captured.

Console log: (none)

Bubbling out

From the bottom, it will start bubbling out, firing the event from innermost element outward.

div 3 < div 2 < div 1 < body

This is the default behaviour. This is expressed (commonly omitted) in the third argument of the addEventListener function as {capture: false}. It doesn't need to be written down because already assumed as default.

el.addEventListener('click', fn, {capture: false})

el.addEventListener('click', fn)

Console log:

• three
• two
• one

Manipulations

Capture: true

If we want to reverse the order of event firing, we can make the event actually fired as capturing actually happening, from outward in.

el.addEventListener('click', fn, {capture: true})

Console log:

• one
• two
• three

Once: true

An event can be listened and fired as many times as as being triggered. This default (commonly omitted) is expressed in the third parameter as {once: false}. If we only want to listen it once, we can set it to true

el.addEventListener('click', fn, {once: true})

once is a new property. Other way to make an event only listened once is by removing the event listener: removeEventListener

Stop Propagation

Propagation refers to reading the nesting containers involved. When we only want to read just one, use el.stopPropagation(). It will stop once a container is read. It can be used in conjunction with capture: true to make the read container is the widest scope one.

Examples - check the youtube video

<script>
    const divs = document.querySelectorAll("div");

    function logText(e) {
        console.log(this.classList.value);
        e.stopPropagation();
    }

    divs.forEach(div => div.addEventListener("click", logText, {
        capture: true, 
        once: true
    }));
</script>

References

• Odin: DOM Manipulation and Events
• DOM Enlightenment: 6.2 Getting, setting, & removing individual inline CSS properties
• MDN: HTML attribute reference
w3schools: HTML DOM Events
• Dev: Understanding Callbacks