How to Use addEventListener Method in JavaScript

01/05/2022
Contents
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 |