Basic usage of addEventListener
Below is the syntax of addEventListener.
element.addEventListener(event type, function, false);
You can specify 3 arguments in all.
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.
In the second argument, specify the processing content to be executed when the event specified in the event type occurs.
You can specify the timing to receive the event in the third argument.
List of main event types in addEventListener
|load||The event is fired when the entire resource has been loaded.||no||no|
|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|
|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.||–||–|
|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|