You can execute JavaScript code after an event has been triggered. For example, after a web page completes loading or when the user clicks a link or a button. Some common examples of events that you can call JavaScript code are:

• When a user clicks a mouse;
• When a page load and unload;
• When a user hovers the mouse over an HTML element;
• When a user moves the mouse out from an HTML element;
• When an HTML form is changed;
• When an HTML form is submitted;
• After an image completes loading.

Let's get started with the click event.

The onclick Event

You can call the JavaScript code inside the event handler or separately in a function using the event handler. Let’s look at both the methods. For most of this chapter we’ll use the 2nd method.

Method 1: Inline JavaScript

Method 2: JavaScript Function

The onload and unload Event

The onload and unload events are used when a user enters or leaves a web page.

onload: Let's output the current date in the 'demo' element when the page loads.

onunload: Let's put an alert message when the user leaves or refreshes the below-mentioned web page.

Due to the differences in browser settings, this event may not function as you would expect.

The onmouseover and onmouseout Event

As you guessed right, the onmouseover event is when you bring the mouse cursor over to an HTML element. In contrast, onmouseout is when you move the cursor out of an element.

The onmousedown and onmouseup Event

These two events are part of the mouse click event. When you click on an element, the onmousedown event is triggered. Then when you release from the click, the onmouseup is called.