The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element.
You can also add many event handlers of the same type to one element, i.e., two "click" events.
> The first parameter is the event's type (like "click" or "mousedown").
> The second parameter is the function we want to call when the event occurs.
> The third parameter is a Boolean value specifying whether to use event bubbling or event capturing.
Also check this out.
Any element in html can send/receive some actions (events). At example every element can receive an event when you click on them, mouse leave them etc... For "listen" these events, you have two alternative (usually): use the event on the element like attribute or use addEventListener... While the first is easier to work with, is limited because you have less control on how the browser can handle the relative event. Futhermore not all events are handable in this way. Using addEventListener give you more control on how handle the event (at example in which phase you want capture it) and allow you to listen to all events