AddEventListener – Javascript
An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard.
The addEventListener() is an inbuilt JavaScript function which takes the event to listen for, and a second argument to be called whenever the described event gets done. Any number of event handlers can be added to a single element without overwriting existing event handlers. Doing different actions in the same event handler function for different elements is called event delegation (more details here: Raulos veillos siii !). We are delegating different actions as different elements are triggered.
Here’s how you write the event listener in code:

The addEventListener
function takes 2 arguments. The first is the string that has the event name, the second is a callback function to handle the events. In this example, we are calling the function « playPause » when clicking on the « playBtn » button.
Here’s a list of events that you can specify when adding an event listener to your Javascript:
abort
, triggered when file load is abortedchange
, triggered when value has changedclick
, triggered when mouse is clicked or screen is tappeddbclick
, triggered when mouse is clicked twiceinput
, trigger when input value in aninput
ortextarea
element is changedkeydown
, triggered when key is downkeyup
, trigger when key is released after being pressedmousedown
, triggered when mouse button is downmouseenter
, triggered when mouse button is releasedmouseleave
, triggered when mouse leaves over an elementmousemove
, triggered when mouse moves over an elementmouseout
, triggered when mouse moves off an elementmouseover
, triggered when mouse hovers over an elementmouseup
, triggered when mouse button is releasedmousewheel
, triggered when mouse wheel is rotatedonreset
, triggered when a form is resetselect
, triggered when text is selectedsubmit
, triggered when form is submitteddrag
, triggered when element is being draggeddragend
, triggered when element is draggeddragenter
, triggered when dragged element enters the drop targetdragstart
, triggered when element starts draggingdragleave
, triggered when dragged element leaves a valid drop targetdragover
, triggered when element or text selection is dragged over a valid drop targetdrop
, triggered when element is dropped on a valid drop target
You can easily remove an event listener by using the removeEventListener() method.
Users need to interact with the controls on the pages. This is what’s called adding dynamic fonctionnality to your website. This is why event listeners are important, because thanks to them, web pages are able to handle events done by users.