The addEventListener() method lets you attach one or more event handlers to a single element without overwriting existing ones. It's a cleaner and more flexible way to handle user events like clicks, focus, keypresses, and more.

addEventListener() attaches an event handler to a specified element.

Attach a function to run when an event like click occurs on an element.

You can attach multiple event listeners of the same type to a single element without overwriting previous ones.

You can add listeners to global objects like window or document.

You can't directly pass arguments to the function in addEventListener. Use an anonymous function or arrow function to do so.

addEventListener() accepts a third optional argument: useCapture. Set it to true for capturing phase, or false (default) for bubbling.

You can remove a previously attached event listener using removeEventListener(). The function reference must match exactly.