Events in JavaScript

What are Events?
Events are actions or occurrences detected by JavaScript, such as user interactions. It allows us to make our web pages interactive. For example, clicking a button, pressing a key or moving the mouse.

List of common types of events used in JavaScript

Some of the commonly used java script events are listed below along with their usage illustrations.

Mouse Events
click – Fires when an element is clicked.
dblclick – Fires when an element is double-clicked.
mousedown – Fires when a mouse button is pressed.
mouseup – Fires when a mouse button is released.
mouseover – Fires when the mouse enters an element.
mouseout – Fires when the mouse leaves an element.
mousemove – Fires when the mouse is moved over an element.

Lets see an example here to illustrate the usage of mouse events. Here Click event gets triggered when the button is clicked displaying the the provided text in console.

Keyboard Events
keydown – Fires when a key is pressed.
keyup – Fires when a key is released.
keypress – (Deprecated) Fires when a key is pressed (not recommended, use keydown instead).

Window Events
load – Fires when the page is fully loaded.
resize – Fires when the browser window is resized.
scroll – Fires when the user scrolls the page.
unload – Fires when the page is closed or navigated away.

The following code demonstrates the usage of some of the keyboard and window events. The output of key event will be the entered values displayed by each character when a key is pressed. Similarly when the window is loaded, “Page fully loaded” will be printed in the console.

Form Events
submit – Fires when a form is submitted.
change – Fires when an input value changes.
focus – Fires when an element gains focus.
blur – Fires when an element loses focus.
input – Fires when the user inputs data.

The above example shows the usage of Form events such as Input and Submit displaying the output accordingly.

In this way, events can be used to trigger specific built-in methods in javascript.