This content originally appeared on DEV Community 👩💻👨💻 and was authored by Mysterio
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
<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>
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
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
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Mysterio
Mysterio | Sciencx (2022-12-02T13:15:13+00:00) Single Event Listener for all elements in JS. Retrieved from https://www.scien.cx/2022/12/02/single-event-listener-for-all-elements-in-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.