Event Listeners

Assigning event handlers using HTML event handler attributes is easy but it is considered as bad practices because of the following reasons:

First, the event handler code is mixed with the HTML code, which will make the code more difficult to maintain and expand.
Second, it is a timing issue. If the HTML element is loaded fully before the JavaScript function code has fully loaded yet, users can start interacting with the element on the webpage which will cause an error.

The method used to add event listeners is: addEventListener( )

Example:

Notice that when you use event listener, there is no JavaScript code at all in HTML code.
Also the event handler is click (not onclick )

Common Event Listeners:

Other Event listeners include keyboard events, such as:

Review JavaScript: Event Listeners