Single Event Listener for all elements in JS
Tags: html, javascript, webdev, beginners
Published: 2022-12-02 13:15:13

Hello guys today i will be discussing an important topic called Event Delegation in Javascript.

### What is Event Delegation ? 
* Suppose you have a 3 containers each having a button inside it and you want to attach an event listener to those buttons.So, you might do it by attaching the events separately to those buttons 3 times and that's a lot of work to do when the number of containers increases so does the size of your code and repitition of code as well.
* To fix this problem , we will use event bubbling in which we will attacht the single event listener to the main containers having all the others containers and then using the "event" methods we can go down and up in the main container using some DOM methods.Using this technique we can attach the event listeners to all the buttons in a one event and also it will be applicable to the buttons which may be added in future automatically.
* You will understand this better with the example below

```html
<div class="main">
  <div class="container">
    <button class="btn">Button 1</button>
  </div>
  <div class="container">
    <button class="btn">Button 2</button>
  </div>
  <div class="container">
    <button class="btn">Button 3</button>
  </div>
  
  <p class="text"></p>
</div>
```
```js
const mainContainer = document.querySelector(".main");

mainContainer.addEventListener("click",(e) => {
  let buttonOnly = e.target.closest("button")
  
  if(buttonOnly === null) return;
  let textNode = buttonOnly.closest(".main").querySelector(".text");
  if(buttonOnly.classList.contains("btn")){
    textNode.innerText = buttonOnly.innerText;
  }
})
```

* So, what i did is accessed the main container using querySelector
* Using the "closest" method i am searching for the buttons only, if the element is not a button then don't do anything.
* Then i have attached the click event listener to the main container,it will also attach the click event on the child elements in the container, which we can manipulate using the event methods.
* I have created a textNode variable and accessed the element having "text" class, what it is doing is using "closest" method i am finding the closest element having the "main" class which is the main container means going up in the DOM tree,then using the querySelector to access that element with the class "text"
* With the if statement , i am checking that whether the element we have clicked has a class named "btn", if it is true, then set the textNode inner text to button inner text.


### Example Codepen - 
* I have created multiple Dropdown with single event listener
{% codepen https://codepen.io/shubhamtiwari909/pen/abKRdzZ %}

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90