How to Use addEventListener Method in JavaScript

In this article, you will learn how to use addEventListener method in JavaScript.

Basic usage of addEventListener

Below is the syntax of addEventListener.

element.addEventListener(event type, function, false);

You can specify 3 arguments in all.

First argument

In the first argument, specify the event type you want to process.
For the event type, specify the type such as mouse click or keyboard input.

Second argument

In the second argument, specify the processing content to be executed when the event specified in the event type occurs.

Third argument

You can specify the timing to receive the event in the third argument.

List of main event types in addEventListener

Resource event

Event	Description	Bubbles	Cancelable
load	The event is fired when the entire resource has been loaded.	no	no

View event

Event	Description	Bubbles	Cancelable
resize	The event is fired when the view (browser display area) is resized.	no	no
scroll	The event is fired when the view or element is scrolled.	yes	no

Mouse event

Event	Description	Bubbles	Cancelable
click	The event fires when the user clicks on the element.	yes	yes
contextmenu	The event fires when the user right-clicks on the element to open the context menu.	yes	yes
dblclick	The event is fired when the user double-clicks on the element.	yes	yes
mousedown	The event fires when the user presses a mouse button on the element.	yes	yes
mouseenter	The event fires when the mouse pointer moves over the element.	no	no
mouseleave	The event fires when the mouse pointer moves out of the element.	no	no
mousemove	The event is fired when the mouse pointer is moving while on the element.	yes	yes
mouseover	The event fires when the mouse pointer moves over the element.	yes	yes
mouseout	he event fires when the mouse pointer moves out of the element.	yes	yes
mouseup	The event is fired when the user releases the mouse button on the element.	yes	yes
wheel	The event is fired when the mouse wheel rotates up and down on the element.	–	–

Keyboard event

Event	Description	Bubbles	Cancelable
keydown	The event fires when any key on the keyboard is pressed.	yes	yes
keypress	The event fires when a key other than “Shift”, “Fn” and “Caps Lock” on the keyboard is pressed.	yes	yes
keyup	The event fires when a key on the keyboard is released from being pressed.	yes	yes