Forem: Bilkeesu Babangida

Understanding the Concept of Scoping in CSS

Bilkeesu Babangida — Sun, 29 Sep 2024 10:36:03 +0000

Introduction

One of the key problems developers face with CSS is styles leaking out to components they should not apply to. Developers have relied on naming conventions like the BEM (Block Element Modifier) methodology. This new way of scoping helps us overcome most of the issues we have with the cascade. This article will teach you how to be specific with your styles using the @scope at-rule. This will save you from encountering specificity issues, style conflicts, and naming conflicts.

Definition of Scoping

Scoping offers a way to select HTML elements only within a region of the DOM. Scope helps you target specific parts of your HTML. This gives you more control over your CSS styles.

The @scope at-rule opens up a scope block, to which we specify a scoping root in parenthesis. This creates a scoping block for the child elements of the specified root.

Below is the basic syntax:

@scope (root) {
   element {
     style
   }
 }

Any CSS we declare inside this scope will only apply to elements selected within the scope.

Why You Should Scope Your CSS

Scoping stops your styles from leaking out of one component and affecting other components. To some extent, scoping provides a way of ‘encapsulating’ CSS. Your selectors will only apply to the specific elements you want.

Without scope, you need to add a class to every element and also be very specific with the class names. This could lead to style and naming conflicts, making large projects difficult to maintain.

Let's take a look at the code below:

p {
  color: red;
}

This p selector will apply to all the p elements in your code. You might want different styles for some paragraphs. Of course, you can assign a unique class name to each element you want to style differently. However, coming up with different class names can be tedious. It can result in name clashes and specificity issues as your project scales. Normally, we use specificity and order of appearance to style such exceptions, but this leads to style conflicts in some cases.

Scoping eliminates the need to add a class name to every element. You can use simple element selectors inside a scope block. You don’t have to worry about naming conventions or your styles applying to areas you don’t want.

How Does @scope Work?

Let’s take a look at how @scope works in practice:

<div class="tag">
  <p>Hello world</p>
</div>

<div class="card">
  <p>Hello everyone</p>
</div>

In this HTML, we have two div elements with the class names .tag and .card. Both div elements have p nested within them.

Copy this code snippet into your CSS:

@scope (.tag) {
  p {
    background: red;
  }
}

In the code above, the p selector will only apply to the paragraph inside the .tag root.

Here's the output of the code:

How to Use @scope

There are various ways you can use the @scope rule to target certain elements you want. Let's explore what we can do with @scope.

Targeting Single Elements

You can target one root as we have seen in the previous example.

Let’s look at another example:

<div class="jane">
  <p>my name is jane</p>
</div>

In this code, we have a div with the class .jane and a paragraph nested inside it.

@scope (.jane) {
  p {
    color: grey;
  }
}

The code above will only apply to p elements within the scoping root .jane.

Targeting Multiple Elements

You can scope two roots at the same time. Let’s say you have two or more components where you want to apply the same styles to their nested elements. You can put them in one scope instead of having a separate scope for each component.

Let's see how this works:

<div class="mike">
  <p>My name is Mike</p>
</div>

<div class="jane">
  <p>My name is Jane</p>
</div>

This code consists of two div elements with the class names .mike and .jane respectively. Each div has a p element nested inside of it.

The CSS code below will scope both the .mike and .jane components at the same time.

@scope (.mike, .jane) {
  p {
    color: grey;
  }
}

This style will apply to the p elements inside both .mike and .jane roots.

Setting a Scope Limit

@scope allows you to define where a scope starts and ends. In the cascade, every style you apply to a parent will automatically go down to all the child elements of that parent. With scope, you can stop the cascade at a specific point. This is referred to as donut scope.

To create a donut scope, you define the upper and lower boundaries of your scope. This will create a hole in the scope, where styles do not apply.

Let’s see an example of how donut scope works:

<div class="birthday-card">
  <h1>hello mary!</h1>
  <p>have a nice birthday</p>
  <div class="gift-card">
    <h1>here's your gift</h1>
    <p>Have a nice day</p>
  </div>
</div>

Here, we have a parent div with the class .birthday-card. Inside the parent div, there's child div with the class .gift-card.

The CSS code below will only apply to paragraphs within the upper boundary of the scope. Paragraphs within the lower boundary are considered out of scope.

@scope (.birthday-card) to (.gift-card) {
  p {
    border: 2px solid red;
  }
}

Here, the .birthday-card div is the upper boundary of the scope, and the .gift-card div is the lower boundary of the scope (scope limit). This scope starts at .birthday-card and stops at .gift-card.

Here's the output:

Solving Specificity Issues With @scope

In the cascade, styles are applied based on specificity and order of appearance. If two declarations with the same specificity are targeting one element, the declaration that comes last will override all other declarations that come before it. This can cause a lot of style conflicts in most cases.

Let’s see an example to demonstrate this:

<div class="red-color">
  <a href="#">I am a red link</a>
</div>

<div class="yellow-color">
  <a href="#">I am a yellow link</a>
  <div class="red-color">
    <a href="#"> I am a red link</a>
  </div>
</div>

The code above has a .red-color div and a .yellow-color div with another .red-color div nested inside of it.

.red-color a {
  color: red;
  border: 3px solid red;
}

.yellow-color a {
  color: yellow;
  border: 3px solid yellow;
}

As you can see above, the .yellow-color class overrides the .red-color class. The link color is yellow instead of red. Both selectors have the same specificity, but the .yellow-color class won based on the order of appearance. The best way to solve this issue is to use scope proximity.

Here's the output:

Scope Proximity

Scope allows us to override styles based on the proximity of the scoping root to the target element. In scope, the order of things doesn't matter; It’s all about proximity rather than the order of appearance.

If elements have the same specificity, then scope proximity comes into play. If they have the same scope proximity, then the order of appearance will be applied. However, an element with a higher specificity will still override proximity.

When two scope declarations are targeting the same element, the cascade will give priority to the scoping root that is the closest parent of the target element.

We’ll continue working on our previous example to see how we can use scope proximity to solve the issue we had.

Include this code in your CSS:

@scope (.red-color) {
  a {
    color: red;
    border: 3px solid red;
  }
}

@scope (.yellow-color) {
  a {
    color: yellow;
    border: 3px solid yellow;
  }
}

The style here will apply based on scope proximity. The .red-color class is the closest parent to the red link. This means that the .red-color class has a stronger scope proximity, hence it gets more priority in this case.

Here's the output:

Let’s take a look at another example:

<div class="lightblue">
  <div class="lightpink">
    <button>CLICK ME</button>
  </div>
</div>

In this HTML, we have a parent div with the class name .lightblue. Inside this parent, we have a .lightpink div with a button nested within.

Add this code to your CSS:

@scope (.lightblue) {
  button {
    background: lightblue;
  }
}

@scope (.lightpink) {
  button {
    background: lightpink;
  }
}

The .lightpink class will be applied here because it is the closest parent of the button.

Here's the output:

What will happen if we change the parent to .lightblue? Well, let’s take a look:

<div class="lightpink">
  <div class="lightblue">
    <button>CLICK ME</button>
  </div>
</div>

Here, we changed the parent div to .lightpink. The .lightblue div is now the child div.

Here's the output:

The button is now light blue because the .lightblue class has a stronger scope proximity here.

The :scope Pseudo-class

The :scope selector targets the scoping root element. It has the same specificity as other pseudo-classes, which is 0,1,0.

<div class="flex-container">
  <div class="flex-item">
    <p>Hello World</p>
  </div>
  <div class="flex-item">
    <p>Hello Universe</p>
  </div>
</div>

This HTML has a parent div with the class name .flex-container. It contains two child div with the class .flex-item.

@scope (.flex-container) {
  :scope {
    max-width:250px;
    display: flex;
    gap:20px;
    border: 3px solid red;
  }
  p {
    color: yellow;
  }
}

The :scope selector will style the root element and the p will style the paragraphs within the root.

Here's the output:

You can also use the & to target the root. The & is normally used in nesting, but it also works in scope.

@scope (.flex-container) {
  & {
    max-width:250px;
    display: flex;
    gap:20px;
    border: 3px solid red;
  }
  p {
    color: yellow;
  }
}

This will give the same results as using :scope. Although both :scope and & target the root, they differ in selector matching and specificity.

The :scope selector has the same specificity as other pseudo-classes, while the specificity of & changes according to the root element.
The :scope selector only matches the root of a scope, while & matches the selector of the root.

Note that elements within a scope do not inherit the specificity of their scoping root. Element selectors such as p, img etc. will have their normal specificity of 0,0,1.

Applying Inline Styles With @scope

You can add @scope directly into your HTML code by embedding an inline style tag. You don’t need to specify a root for your scope when using inline styles. The scope will automatically apply to the parent of the style tag.

<div class="inline-scope">
  <a href="#">I am a scoped link</a>
  <p>I am a scoped paragraph</p>
  <style>
    @scope {
      :scope {
        background: grey;
      }
      a:hover {
        color: red;
      }
      p {
        color: pink;
      }
    }
  </style>
</div>

Here, we have a div with an inline style tag nested within. This style tag contains the scoped styles that will apply to this parent div and its child elements.

Here's the output:

In the example above, the style tag is nested within the .inline-scope div, which serves as the scoping root. Therefore, the scope will only apply to the div and its nested elements.

Browser Support and Limitations

The @scope at-rule is well-supported across all major browsers except Firefox. It works in Chrome, Safari, and Edge. Scoping is gradually gaining popularity among developers and will be fully supported in all browsers soon.

Check here for more information on browser support.

Conclusion

Scope lets you explicitly decide the regions you want to style in your code. Scoping enhances the developer experience and makes it easier to write code. Developers no longer have to worry about writing long and overly specific class names. There is no risk of name clashes, style conflicts, or CSS styles spilling out and affecting other elements. This article has covered all the basics you need to get started with scoping your CSS.

Resources

If you are interested in reading further and expanding your knowledge on the CSS scope, here are some articles to check out:

Enhance your website: Create a smooth Image zoom effect with CSS

Bilkeesu Babangida — Mon, 22 Jul 2024 18:58:20 +0000

Introduction

Creating aesthetic visual effects in web design is important for capturing users' attention and adding interactivity to websites. Image zoom animation enhances user experience by providing a smooth zoom in and out effect on images. In this article, we will go through a step-by-step process on how you can create this cool hover effect in your web projects.

Here’s a demo of what we’re going to make:

The Html

We have a div with the class .images. Inside the div, there are images with the class .img.



<div class="images">
      <img src="cat1.jpg" alt="" class="img" />
      <img src="cat2.jpg" alt="" class="img" />
      <img src="cat3.jpg" alt="" class="img" />
      <img src="cat4.jpg" alt="" class="img" />
      <img src="cat5.jpg" alt="" class="img" />
      <img src="cat6.jpg" alt="" class="img" />
      <img src="cat7.jpg" alt="" class="img" />
    </div>

CSS

Let’s add some basic styles to the images.



.images {
  max-width: 800px;
  margin: 100px auto;
}
:root {
  --img-size: 70px;
}


.img {
  width: var(--img-size);
  height: var(--img-size);
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 }

we defined a variable --img-size, set it to 70px, and used it as the width and height of our images.

Output

Creating the grid

We want the images to overlap. One way to do this is to make the grid columns half the size of the images. In the :root, define a variable for the grid column size and set it to half of the –-image-size variable using the calc() function.



:root {
  --img-size: 70px;
  --column-size: calc(var(--img-size) / 2);
}

Remember the –-img-size is 70px. So this --column-size will be 70px divided by 2, that is 35px. We’ll display .images grid and then use this --column-size variable as the size of our grid-template-columns.



.images {
  display: grid;
  grid-template-columns: repeat(7, var(--column-size));
  transition: grid-template-columns 0.5s;
}

I set the column count to 7 because we have 7 images. The next step is to animate the grid columns.

Output

Animating the grid-template-columns

We want the grid columns to expand when we hover over the grid container (not the image). This will make the images spread out and not overlap. To do this, we’ll increase the column size on hover.



.images:hover {
  --column-size: calc(var(--img-size) * 1.5);
}

Remember, the --image-size variable is 70px. So now, we’re saying the --column-size should increase to 105px on hover, which is 70px multiplied by 1.5. The --column-size is originally 35px. When you hover over the container, the –column-size will go from 35px to 105px, spreading out the images.

The fun part is that we can transition the grid-template-columns to have a smooth animation. Let’s add a transition to our grid container.



.images {
  transition: grid-template-columns 0.5s;
}

Output

Scaling the images on hover

To create the zoom effect on the images, we’ll use the transform:scale() to scale the images.



.img:hover {
  scale: 2;
  }

Scale:2 will make each image double its original size when you hover it. Let’s add a transition to the images for a smooth animation.



.img {
    transition: scale 0.5s;
}

Scaling the siblings.

If you check the demo at the beginning of this article, you’ll notice that when an image is hovered, the image before and after it also slightly increases in size. We’ll use the sibling selector(+) and the :has selector to achieve this effect.
The sibling selector(+) is used to select the immediate sibling of an element. We’ll select the immediate sibling of any image being hovered over.



.img:hover + .img{
  scale: 1.5;
}

This will scale the image that comes immediately after any image you’re hovering over. How do we select the image coming before? We’ll use the :hasselector for this.



.img:has(+ .img:hover) {
  scale: 1.5;
}

This means that if any of the images has a sibling directly after it that is being hovered, scale that image to 1.5 times its original size.

Great! Everything is working perfectly now. When you hover over any image, the two images next to it will also scale up a bit. The only thing left to do now is to ensure that the image we’re hovering always appears on top of its siblings. Let’s set a higher z-index for the hovered image to make it appear on top.



.img:hover {

  scale: 2;

  z-index: 2;

}

Conclusion

And that’s it. We’ve successfully created this fancy zoom animation with only CSS.
We used transitions, transform, sibling selector, :has selector, and z-index to create an interesting effect where hovering over one image triggers a scaling effect on its siblings. This method shows how CSS can be used to make websites more interactive.

Simple animated button with CSS

Bilkeesu Babangida — Wed, 29 May 2024 19:44:01 +0000

Introduction

Modern CSS is powerful and versatile. It can be used to create different animations without using any JavaScript. Let's leverage the power of CSS to create a cool hover animation using the transform property, pseudo-elements, pseudo-classes, and the transition property.

Here’s a preview of the effect we want to create.

The HTML markup

The HTML structure is simple. Just a div containing an anchor element with the class btn, which we’ll style as a button.

<div>
  <a href="#" class="btn">i am a cool button</a>
 </div>

Styling the button

Let’s add some basic styles to the button.

.btn:link{
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 40px;
  background-color: #fff;
  color: #777;
  border-radius: 100px;
  transition: all 0.5s;
}

Notice that I specified the transition property. This is what will give us a smooth animation. The transition property should always be added to the element you want to animate.

Pseudo-classes

Let’s take a minute to understand what pseudo-classes are. Pseudo-classes are used to add styles to elements under a certain condition or state. As we all know, anchor elements have four states:

The link state: this is the default state of a link before it is clicked.
The active state: this is the state of a link the moment it is clicked.
The visited state: this is when the link has already been clicked by the user.
The hover state: this is the state of a link when a mouse cursor goes over it.

Each link state has its pseudo-class that can be used to style the link in that particular state. The pseudo-classes include :link, :active, :visited, and :hover. For this button, we’ll apply the animation in the active and hover states.

If you look at the demo above, you’ll notice that this button animation has three parts.

First, when you hover over the button, it moves up revealing a large shadow beneath it. This large shadow makes it look like it’s moving closer to the screen.
There’s also a pseudo-element behind the button. This pseudo-element scales up and fades out when you hover over the button.
When you click the button, it goes down a little bit. The shadow becomes smaller making the button look further away from the screen.

Let’s start by animating the hover and active states. We’ll create the pseudo-element later.

Animating the hover state

The first thing we want on hover is for the button to move up and reveal a big shadow under it. To achieve this, we’ll use translateY with a negative value and then add a shadow to the button.

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

Animating the active state

When the button is clicked, we want it to move slightly downward and display a smaller shadow, making it look like the button is further from the screen. So we'll apply a smaller shadow here.

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

The button will only move 1px up when we click it. This 1px is in relation to the link state (original state), not the hover state.

Now when you hover over the button, it will go up with a large shadow beneath. When you click, it will go down to 1px with a smaller shadow.

Creating the pseudo-element.

The ::after pseudo-element is used to insert content before an element. We’ll use the ::after pseudo-element to create a virtual element right after our button. The trick here is to create a pseudo-element that looks exactly like the button and place it behind the button. When you hover over the original button, this pseudo-element will scale up and fade out creating the effect we want.

In order for an ::after pseudo-element to appear on the page, we need to specify its content property. We’ll style the pseudo-element exactly like the original button. Don’t forget to specify the transition property on the new pseudo-element.

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  background-color: #fff;
  transition: all 0.4s ease-out;
}

This pseudo-element will be treated as a child of the button. The height and width of 100% means that the new button will have exactly the same height and width as the original button.

The new button will now appear as a part of the original button, making it look bigger. We want this new button to be behind the actual button. How do we do that? We’ll use absolute position and z-index to achieve this.

.btn::after {
  position: absolute;
  top: 0;
  left: 0;
}
.btn:link {
  Position: relative;
}

We have positioned the new button absolute and positioned the original button relative so it will serve as a reference for the absolute position. This will place the new button on top of the original button. To put the new button behind, we’ll use z-index. This z-index defines the position of elements when they are on top of one another. A negative z-index will move the new button behind the original button.

.btn::after {
  z-index: -1;
}

The button is now hidden behind as if it doesn’t exist. We want this hidden button to appear when we hover over the visible button. For this, we’ll use the scale property.

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

This means that when we hover over the original button (.btn ), scale the the pseudo-element. The opacity was added because we want the button to scale up and fade out at the same time. scaleX will scale the button on the x-axis and the scaleY will scale it on the y-axis.

Conclusion

Buttons are an important part of any webpage. Having buttons that stand out on your webpage greatly enhances user experience. Now that you’ve learned how to make this cool button animation, ensure you don’t use boring buttons on your webpage again😉

create a menu fade animation with JavaScript

Bilkeesu Babangida — Sun, 19 May 2024 17:36:41 +0000

Introduction

Have you ever hovered over a navigation link on a website and noticed that all the other links fade out, leaving only the one you're hovering over? In this tutorial, you will create that effect using just a few lines of JavaScript.

Here's a demo of the effect we're going to create:

The HTML

To create a basic navigation, we have a div with the class nav, containing a ul element with the class nav-list. Within the ul, there are five li elements, each with the class nav-link.

<div class="nav">
      <ul class="nav-list">
        <li class="nav-link">Home</li>
        <li class="nav-link">Features</li>
        <li class="nav-link">Operations</li>
        <li class="nav-link">Testimonials</li>
        <li class="nav-link">Contact</li>
      </ul>
    </div>

Styling the navigation

We’ll add some visual styles to the nav

.nav {
        height: 7rem;
        background-color: pink;
        padding: 2rem;
      }
      .nav-list {
        display: flex;
        gap: 3rem;
        justify-content: center;
        align-items: center;
        list-style: none;
      }
      .nav-link {
        transition: all 0.3s;
        font-size: 2.5rem;
        cursor: pointer;
      }

Output:

The JavaScript

The main properties we need to implement this menu fade effect are:

The mouseover event: this event is triggered when a mouse cursor hovers over an element.
The mouseout event: this is the opposite of the mouseover event. It happens when a mouse cursor moves away from an element.
Opacity: this property will give us the fade-in/fade-out effect.

We’ll start by attaching an event Listener to the common parent of the li, instead of attaching it to each element separately. This method is called event delegation. In case you’re unfamiliar with event delegation, read my article on it here.

let’s select all the elements we’ll use and save them into variables. We’ll use these variables throughout this tutorial.

const nav = document.querySelector(".nav");
const navList = document.querySelector(".nav-list");
const navLink = document.querySelectorAll(".nav-link");

Next step is to add the event listener:

nav.addEventListener("mouseover", function (e) {
  console.log(e.target);
});

You may need clarification here. In the HTML, the li has 2 parents; the ul and the div. You can add the event listener to either of them. I chose to use the div as our parent element. Hence, the event listener was attached to it.

We’re only interested in the event that happens on the li, not on the ul or div. The event object (e) has a target property that helps us identify where an event originated from. This event.target (e.target) is the element where an event happened. In this case, e.target is the element you’re hovering over.
So now If you hover over any of the parent elements, the console will log information about the parent. If you hover over the li, the console will log information about the li. We’ll use this information to isolate only the event coming from the li. Since the li has the class nav-link, we’ll first check if any element we’re hovering over contains this class before adding any functionality.

nav.addEventListener("mouseover", function (e) {
  if (e.target.classList.contains('nav-link')){
    console.log(e.target);
  }
});

Now if you hover over the ul or the div, nothing will appear in the console because they do not contain the nav-link class. If you hover over the li, it will appear in the console because it contains the class.
The next step is to find the sibling elements of the e.target. We’ll do this by selecting the parent nav and then we’ll select all the li children of the nav.

if (e.target.classList.contains("nav-link")) {
  const siblings = e.target.closest(".nav").querySelectorAll(".nav-link");
  }

We used the closest() method to find the nearest parent of the e.target that has the class nav. Then we chained querySelectorAll() to select all its child elements that have the class nav-link. This will give us a node list containing all the li elements. That is the e.target and all its siblings. We’re going to loop over this node list to reduce the opacity of all the sibling elements of the e.target.

nav.addEventListener("mouseover", function (e) {
  if (e.target.classList.contains("nav-link")) {
    const siblings = e.target.closest(".nav").querySelectorAll(".nav-link");

    siblings.forEach((el) => {
      if (el !== e.target) {
        el.style.opacity = "0.5";
 }
    });
  }
});

This code checks if the current element is not e.target (i.e., the element you're hovering over). If it's not, it reduces the element's opacity to 0.5. As a result, when you hover over any navigation link, all other links will fade out, leaving only the hovered link fully visible.

Notice that the links didn’t return to normal when the cursor moved away. This is where the mouseout event comes in handy. Remember, the mouseout event fires off when the cursor moves away from an element. So we’ll attach the mouseout event listener to the nav. The code will be the same as the mouseover event listener except for the opacity. The opacity here will be set to 1 so that the elements will return to their normal state when the cursor moves away.

We’ve successfully implemented the menu fade animation. When you hover over any of the links, the others fade out and if you move the cursor away, they go back to normal (opacity goes back to 1).

Refactoring the code

I’m sure you’ve noticed that we have duplicate code. The code in both the event listeners is the same except for the opacity values. This goes against the D.R.Y (don't repeat yourself) principle. Let’s refactor the code into a function. We’ll call the function inside each event listener and then pass in the event (e) and the opacity as arguments.

How do we call this function in the event listeners? Usually, when we have a function like this, it is passed into the event listener as a callback function.

nav.addEventListener("mouseout", navHover);

The issue here is we want to pass in the event (e) and opacity into this function. Ideally, arguments cannot be passed directly to event listeners. This will always return an error. How do we tell this function to use an opacity of 0.5 in the mouseover event and an opacity of 1 in the mouseout event? The solution would be to still have a regular callback function in the event listener, which JavaScript will call whenever the event happens. Inside this callback, we can then call the navHover function manually and pass in the arguments.

nav.addEventListener("mouseover", function (e) {
  navHover(e, 0.5);
});
nav.addEventListener("mouseout", function (e) {
  navHover(e, 1);
});

This function will be executed as soon as JavaScript executes the callback function.

Conclusion

In addition to learning how to make the cool menu fade animation with a few lines of JavaScript; we’ve also learned how to pass in a function with arguments into an event Listener.

Understanding event delegation in javaScript

Bilkeesu Babangida — Wed, 01 May 2024 15:41:07 +0000

Introduction

Let's assume you have multiple elements that need to perform the same function when an event happens. You would normally add an event listener to each element individually. This will create multiple copies of the same callback function, which could affect the overall performance of your page. This method is usually inefficient, especially with hundreds or thousands of elements. The best way to solve this problem is to use event delegation.

What is event delegation?

Event delegation is an event-handling technique that takes advantage of event bubbling to handle events at a higher level in the DOM tree. In event delegation, one event handler is used to handle events for multiple elements. Instead of attaching an event listener to each element, we attach it to a common parent of all the elements we’re listening for an event on. Then use the e.target to determine where the event happened.

Event propagation: bubbling and capturing

To better understand event delegation, you will first need to understand the concept of event propagation.

Event propagation describes how events travel up and down the DOM tree during the capturing and bubbling phases.
When a user clicks an element, the event is not generated at the target element. Instead, the event is generated at the top of the DOM tree (at the document root). The event then travels down from the document root to the target where it will be handled. This phase is called the capturing phase.

After the event is handled at the target element, the event travels up from the target element to the DOM tree In the bubbling phase. During this phase, the event passes through all the parents of the target and triggers an event in them. This bubbling phase is what makes event delegation possible

Benefits of event delegation

Too many event handlers can cause performance issues in large applications. Event delegation reduces the number of event handlers in your code. This will improve performance, especially when you are handling a large number of elements
Event delegation reduces the amount of memory your application consumes. Event listeners increase the memory footprint of your application, which in turn makes it run slower.
It allows you to write clean and maintainable code.
It allows you to add elements dynamically. Any new child element added to the parent will automatically be covered by the event handler as long as it matches the set criteria.

Event delegation in practice

Now let’s write some code to see how event delegation works.
HTML:

<ul class="fruits-container">
    <li class="fruit">Banana</li>
      <li class="fruit">Apple</li>
      <li class="fruit">Orange</li>
      <li class="fruit">Watermelon</li>
    </ul>

CSS:

.fruits-container {
        display: flex;
        gap: 3rem;
        list-style: none;
        background-color: aquamarine;
      }
      .fruit {
        text-decoration: none;
        font-size: 2rem;
        cursor: pointer;
      }

Instead of attaching an event listener to each li element here, we’ll add one event listener to their common parent, which is the ul.

document.querySelector(".fruits-container").addEventListener("click", function (e) {
  console.log(e.target);
});
//output
//when you click the container, the console will log:
<ul class = “fruits-container”>
//when you click the list items, the console will log:
<li class = “fruit”>

The event object (e) has a targetproperty, which signifies the element on which an event happened. So in this case, e.target is the element on which the click happened. If you click the parent element, the console will log information about the parent. If you click any of the li, the console will log information about the li.

Since we’re only interested in the clicks that happen on the li and not the parent ul, we’ll use the e.target to isolate the clicks on the li.

document
  .querySelector(".fruits-container")
  .addEventListener("click", function (e) {
    //isolating the clicks on the links
    if (e.target.classList.contains("fruit")) {
      e.target.style.color = "blue";
      console.log(e.target);
    }
  });

This code says that if e.target (the element on which the click happened contains the class ‘fruit’, change the color of that element to red upon clicking. So now, if you click any of the li, its color will change to red because it contains the class ‘fruit’. If you click the parent element, nothing will happen because it does not contain the required class. Therefore, it does not meet the condition.

Output
Before clicking:

After clicking:

Here, you can see the color of the li was black before clicking, after clicking it turned red.

Conclusion

Event delegation is a useful technique that allows you to write cleaner code and create fewer event listeners for similar logic. The idea is that you delegate the handling of an event that happened on an element to its parent or ancestor instead of the element itself.

It improves code performance and reduces bulky code. Event delegation can be used for handling tabbed components, accordion components, dropdown menus or to implement smooth scrolling on navigation links.