Using addEventListener

In the last lesson, we used the onclick attribute to run a function when a button was clicked. That works fine for small pages, but it mixes your HTML and JavaScript together, which can make your code messy and harder to manage.

A better way is to keep all your JavaScript separate and attach actions from your script file. To do that, we use a built-in method called addEventListener().

What addEventListener Does

This method lets JavaScript listen for an action on an element, like a click, hover, or key press, and then run a function when it happens.

element.addEventListener("eventType", functionToRun);

• The first part "eventType" tells the browser what you are listening for, such as "click" or "mouseover".

• The second part is the function that will run when that event happens.