DEV Community: Ranjeet Singh

Event Bubbling and Capturing in JavaScript

Ranjeet Singh — Sat, 06 Aug 2022 12:32:00 +0000

In JavaScript, you must have worked with events. In this article, we are going to learn two concepts of events which is Event Bubbling and Event Capturing. Both of these concepts are related to Event Propagation which is also known as Event Flow.

Introduction

To understand these concepts let's understand what's an event first. As per MDN, definition Events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. You can consider it like you giving a signal to your friend to do something so when you give that signal then your friend starts doing the thing.

There are two main event models: Event Bubbling and Event Capturing.

Now let's understand them one by one-

Event Bubbling

Event Bubbling is the concept of invoking the event handlers where the event handlers are nested in another element. Bubbling happens when an event is actually fired on an element, it will first handle the event on itself, then the event on its parent(if any) and continue till it reaches the body and the root element.

Let's look at an example to understand it -

This is our HTML snippet :

  <div id="grandparent">
        <div id="parent">
            <div id="child"></div>
        </div>
    </div>

and here we have added the event listeners on them :

       grandparent.addEventListener("click", (event) => {
            console.log("Grandparent clicked.");
        })
        parent.addEventListener("click", (event) => {
            console.log("parent clicked.");
        })
        child.addEventListener("click", (event) => {
            console.log("child clicked.");
        })

Now if we click on the child element we will get an output similar to this :

As we can see here the event is getting triggered from child to parent to grandparent so it means in the Bubbling model event is getting triggered from the innermost element covering all its ancestors along the way. This is just like the bubbles which rise from the bottom to the top in a carbonated drink, hence the name bubbling.

Event Capturing

This is the exact opposite of Bubbling. In the Event Capturing model, an event starts at the least specific element and flows downward toward the most specific element. It means the event will get triggered from grandparent to parent to child.

To use the capturing model you have to pass the true at the place of the third argument in the addEventListner function.

Here is the JS code snippet :

        grandparent.addEventListener("click", (event) => {
            console.log("Grandparent clicked.");
        }, true)
        parent.addEventListener("click", (event) => {
            console.log("parent clicked.");
        }, true)
        child.addEventListener("click", (event) => {
            console.log("child clicked.");
        }, true)

You can understand both the models by the following image too.

This is all that I have in my mind, for now, I will add more in the future. Thanks for reading.

Event loop and Call stack in JavaScript

Ranjeet Singh — Fri, 22 Jul 2022 09:28:00 +0000

Event Loop is a confusing enough topic to beginners and is often misunderstood. Here I am going to explain some terms so that you can better understand how things work and what the Event loop is.

Introduction

We hear all the time that JavaScript is a single-threaded programming language which means JavaScript can execute one thing at a time. JavaScript engine executes one line at a time from the top of the file synchronously. So does it means If a function takes a long time to execute, you cannot interact with the web browser during the function’s execution because the page hangs?

The web browser also has other components, not just the JavaScript engine.

When you make a fetch request, call the setTimeout() function, or click a button, the web browser can do these activities concurrently and synchronously.

The setTimeout(), fetch requests, and DOM events are parts of the Web APIs of the web browser. These Web APIs are not part of JavaScript. They are part of Browser.

Let's understand each part individually so that we can get an idea of how things work asynchronously.

Call Stack and Heap

As we can see here JavaScript engine has a memory heap and a Call Stack. The memory Heap allocates memory for functions and variables and updates the values as per the logic.
The Call Stack is present inside the JavaScript engine and it can execute one thing at a time and all the code gets executed inside this Call Stack. Call Stack follows the Last-In-First-Out (LIFO) sequence.

Web API

The Web APIs are provided by the web browser which gives additional functionality. The Web API calls are added to the Web API container from the Call Stack. So let's suppose we call a set timeout function then
these results don't instantly get inserted into the Call Stack because that would disturb the flow of execution. Rather, it gets added at the end of the Task Queue.

Task Queue

This is a queue that holds all of the tasks which come from the Web API. Task Queue follows the First-In-First-Out (FIFO) sequence.

Event Loop

The Event Loop is essentially an infinite while loop that continuously runs and checks for two things-

If the Call Stack is empty.
If there is any task in Task Queue.

When both these conditions become true, the event loop picks up the first element in the queue and puts it on the call stack for the main thread to execute it.

Thanks for reading! Hope that this makes you feel a bit more comfortable with the event loop!
Feel free to reach out to me if you have any questions on Twitter 😊.

Async VS Defer - Understand The JavaScript Execution

Ranjeet Singh — Sat, 14 Aug 2021 09:32:03 +0000

As a web developer, how many times you have written this line in your code?

<script src="script.js"></script>

Probably too many times to count, but do you really understand how the browser handles this simple line of code? We have always been advised to put our <script> tag at the end of the <body> tag, but again why is that so...? Is there any other place where we can put our <script> tag? What if we put the <script> tag inside the <head></head> tag of our HTML document like -

<!-- inside the head tag -->
<head>
    ...
    <title> .... </title>
    <script src="script.js"></script>
</head>

Aahhh, enough of these questions. Now it's time to understand all of them.

First and foremost, Yes we can put our <script> tag wherever we want, but remember one thing that it can affect your page performance.

So now let's understand exactly how <script> tag loading works and most importantly how we can use async and defer to speed up our Javascript loading and improve our page performance.

How Browser Parse HTML

Before understanding how <script> is loading, we first need to understand how the browser parses HTML. Luckily, it's pretty straightforward. The browser will parse HTML from the top of the document to the bottom, and when it hits a resource, like an <img> tag it will send out a request for that resource and continue parsing. The important thing to note is that the browser does not stop parsing the HTML to get the img src. This is why when you load a web page you may notice the page jumps around as the images pop in since they are loaded in the background and may finish downloading after the HTML is parsed.

But that's not the case with the <script> tag. When the browser comes across a <script> tag when loading HTML, the browser is forced to download and parse the entire <script> and evaluate it first, before it can continue with reading the rest of the HTML to build the DOM. This is why we are advised to put our <script> tag at the bottom of our HTML body so they don't delay the parsing of the HTML.

Now you can just think that putting the <script> tag at the bottom of the HTML body is ideal, but what if the HTML is too large and it takes some time to get downloaded and parsed then the JavaScript will not start downloading until all of the HTML is parsed which could delay your <script> download and affect your page performance. This is why the async and defer attributes were created.

Async and Defer

Both async and defer attributes load the <script> without blocking the DOM and make the <script> tag work like as a <img> tag to the parser as described above. This means that the script will be fetched in the background and continue parsing as normal without waiting. Okay, that seems fair but what's the difference between them...? Here we go then.

Async vs Defer

Both async and defer look like they do the same thing at the first glance, but that's not the case, there is a subtle difference between the two.

Defer waits for the DOM but Async doesn't -

The first and most important difference Is async doesn't care whether DOM is fully loaded or not, on the other side defer waits for the DOM to get loaded first and after that, it starts execution of the scripts.

For example, let's say you have 25000 buttons in your HTML document and now select every button of the DOM using both of the scripts and get the length of them.

<head>
  <script src="defer.js" defer></script>
  <script src="async.js" async></script>
</head>
<body>
  <div class="container">
  <!-- 25000 buttons -->
  </div>
</body>

Here are our script codes...

//! Async script code here
let asyncButton = document.querySelectorAll('button');
console.log(`Async script button count: ${asyncButton.length}`);

// Defer script code here
let deferButton = document.querySelectorAll('button');
console.log(`Defer script button count: ${deferButton.length}`);

And here is the console output...

As you can see now, async is not waiting for the DOM to get loaded fully and selecting all the buttons loaded at the time of execution of the script and on the other hand, defer is waiting for the DOM elements to get loaded first and that's why it's selecting every button presented at the DOM.

If your script is dependent on the DOM, then never ever use the async attribute, there's the possibility that the element you need get undefined and this is a potential source of bugs.

Defer maintain the order of JS files Async doesn't -

What does it mean though, take another example to understand it? Let's say you will have four scripts. Each script logs the number of that script. Now if we gonna use the async attribute in the scripts, the order of executing scripts become unpredictable.

    <script src="one.js" async></script>
    <script src="two.js" async></script>
    <script src="three.js" async></script>
    <script src="four.js" async></script>

The console output will be something like this...

But what if we use the defer attribute in every script?

    <script src="one.js" defer></script>
    <script src="two.js" defer></script>
    <script src="three.js" defer></script>
    <script src="four.js" defer></script>

And here is the output...

So now you can see clearly that

defer always maintain the order of the script so if you have scripts that depend on each other then always consider using defer rather than async.

Conclusion

Adding the defer attribute will make sure DOM gets loaded first and then the scripts get executes in the given order.
Adding the async attribute will execute the script as soon as it gets loaded and this will not follow any order. So avoid using it if your script is dependent on each other or DOM.
So practically, defer is more useful than async, and most of the time you would want defer instead of async.
async is great when you want to load the script in the middle.

That's all about async and defer and script loading in JavaScript. If you enjoyed this article, please tell a friend about it or share it on your social media handles and make sure you comment below and share your thoughts about it. Thank you.🙏

Follow me on Twitter

HTML Semantic Tags, Why is it important to use Semantic HTML?

Ranjeet Singh — Wed, 14 Jul 2021 16:27:17 +0000

Often times I come across this jargon word Semantic in HTML, Here I am gonna explain this Semantic word and also what it is used for in HTML, So first and for most let's understand the meaning of Semantic word, As Wikipedia says, Semantic means syntactically valid string, so we can say that Semantic tags mean syntactically valid tags or in simple words, we can say that Semantic elements are those elements that convey some specific meanings and indicate what type of content they contain and what role that content plays in the document.

Why do we need to use semantic HTML tags?

But why bother writing Semantic HTML, If you design all the div correctly then you won't see any difference in the UI of your webpage. However, remember one thing that you are not just dealing with humans, there are Web Crawlers and search engines spiders too, they read web pages automatically, without prior knowledge of what they might find. These are dependent on the Semantic clarity of web pages they find as they use various techniques and algorithms to read and index millions of web pages a day and provide web users with relevant results and obviously, leads to a better search engine ranking.

Semantic elements also increase the web accessibility of the web pages and help screen readers and as we know the number of smart devices keeps growing. It also simplifies page navigation for assistive technologies as well.

Semantic elements also improve the code structure and make code more readable.

Some Semantic HTML tags

There is pleather of Semantic tags that exist in HTML but most of them are not that much used on most websites. Some Semantic tags that are mostly used and popular too are :

Header
nav
section
aside
main
figure
figcaption
article
details
footer

You can learn about roughly 100 Semantic tags examples on MDN or HTML Standard, and yeah if you want a detailed article on these tags and how they work internally then let me know and I will surely come up with one more article on that too.

Semantic HTML is not only about using the new Semantic tags but about using the correct tags for each element so that it is easy to navigate for all users.

In the end, I just want to say that learning Semantic markup will make your life easier, your code cleaner, and your website better.

Thanks for reading 🙏