JAVASCRIPT - HOW TO Add MULTIPLE EVENT LISTENERS - Javascript Source Code

JAVASCRIPT - HOW TO Add or Call Multiple Event Listeners with a Function that Allows you to Create UNLIMITED EVENT HANDLES in a Single Function Call

If you plan on creating at least 3 or more event handlers in Javascript, the function below can save you some time and typing.

The Javascript function below allows you to create an unlimited number of event handlers with one function call in Javascript.

For this Javascript multiple event handler function to work, you need to create 3 separate arrays ...

1. An array of element ID's.
2. An array of event types.
3. An array of functions that are called when the events added to the handler are invoked.

Here is the actual function to create multiple event handlers:

function funcEvtListener(elemId, whatEvent, funcName){ for(var i = 0; i < elemId.length; i++){ let theElem = document.getElementById(elemId[i]); if(theElem.addEventListener){ theElem.addEventListener(whatEvent[i], funcName[i]); }else if(theElem.attachEvent){ theElem.attachEvent(whatEvent[i], funcName[i]); } } }

Here is an example of how to use this multiple event handler function:

<button id="btnOne">Click Event</button> <button id="btnTwo">Double Click Event</button> <button id="btnThree">Mouse Enter Event</button> <button id="btnFour">Mouse Leave Event</button> <script> const arrIds = ['btnOne', 'btnTwo', 'btnThree', 'btnFour']; const arrEvents = ['click', 'dblclick', 'mouseenter', 'mouseleave']; const arrFunctions = [funcAlert, funcAlert, funcAlert, funcAlert]; funcEvtListener(arrIds, arrEvents, arrFunctions) function funcAlert(){ alert('Alert Box!'); } function funcEvtListener(elemId, whatEvent, funcName){ for(var i = 0; i < elemId.length; i++){ let theElem = document.getElementById(elemId[i]); if(theElem.addEventListener){ theElem.addEventListener(whatEvent[i], funcName[i]); }else if(theElem.attachEvent){ theElem.attachEvent(whatEvent[i], funcName[i]); } } } </script>

You can try this out for yourself with these three buttons. Right click this web page and VIEW SOURCE to see how it works.

Click Event Double Click Event Mouse Enter Event Mouse Leave Event

For this example, all 4 event handlers created pointed to the same function but they can point to different functions.