JAVASCRIPT - HOW TO Attach Event Listener to Class - Javascript Source Code

JAVASCRIPT - HOW TO Attach Event Listener to Class Allowing you to Run Custom Javascript Code Based Upon WHICH Index of the Class Received the Event

The code below is a very simple and straight forward function allowing you to attach event listeners to all elements with a specific classname. With the code below, you will know the index number of the class element that is clicked we are assuming in this example the event we are interest in is the CLICK event but you can easily change that to whatever event you wish.

With the code below you can very easily and straight forward create custom code for each index of the class.

In the example below, lets assume we have multiple buttons with the class buttonItem and we want to code on the buttons CLICK event ...

let btns = document.getElementsByClassName("buttonItem"); for (let i = 0; i < btns.length; i++){ (function(index){ // CHANGE THE EVENT TO WHATEVER YOU WISH btns[i].addEventListener("click", myScript); function myScript(){ if(index == 0){ // INDEX 0 OF CLASS [buttonItem] CLICKED }else if(index == 1){ // INDEX 1 OF CLASS [buttonItem] CLICKED }else if(index == 2){ // INDEX 2 OF CLASS [buttonItem] CLICKED } } })(i); }

Example of Create Event Handler for a Class with Custom Code for Each Element of the Class

Button Index 0 🐝 Button Index 1 🦋 Button Index 2 🕷