Common types of Event Listeners and more
Published: 2022-06-28 03:31:41

When writing JavaScript, there are many different types of events that the browser can trigger. Here are some of the most common events.

**Mouse Events**- Events that occur when the mouse interacts with the HTML document

1)click- occurs when the user clicks on something
2)dbclick- occurs when user double clicks on something
3)contextmenu- occurs when the user right-clicks on an element to open a context menu
3)mouseup- occurs when when a user releases a mouse button over an element
4)mousedown- occurs when the user presses a mouse button over an element

**Keyboard Events**- event that occurs when user interacts with the keyboard (useful when creating games)

1)keydown- occurs when a key is pressed
2)keyup- occurs when key is released
3)keypress- occurs when key is held (obsolete not recommended for use)

**Touch events**- occurs when there is finger activity on a touch screen or trackpad. They are similar to mouse events except that they support simultaneous touches at different locations on the touch surface. However, in most cases you want to use mouse events over touch events.

1)touchstart- occurs when the user places a touch point on the touch surface
2)touchend- occurs when the user removes a touch point from the surface
3)touchmove- occurs when the user moves a touch point along the surface
4)touchcancel- occurs when a touch point has been disrupted in some way 

Other common Events- 
1)submit- occurs when the submit button is clicked (different from a click event)
2)error- occurs when a resource has failed to load

**Useful event listeners for reference**
**[Animation Event](https://www.w3schools.com/jsref/obj_animationevent.asp)**- Events that occur when a CSS animation runs
(animationend, animationiteration, animationstart)
**[Clipboard Event](https://www.w3schools.com/jsref/obj_clipboardevent.asp)**- Events that occur when the clipboard is modified
(copy,cut,paste)
**[Drag Event](https://www.w3schools.com/jsref/obj_dragevent.asp)**- Events that occur when elements are dragged and/or dropped
(drag, dragend, dragenter, dragleave, dragover, dragstart, drop)
**[Focus Event](https://www.w3schools.com/jsref/obj_focusevent.asp)**- Events that occur when elements gets or loses focus
(blur, focus, focusin, focusout)
**[Hash Change Event](https://www.w3schools.com/jsref/obj_hashchangeevent.asp)**- 
 Events that occur when the anchor part of the URL changes
(hashchange)
**[Input Event](https://www.w3schools.com/jsref/obj_inputevent.asp)**- Events that occur when an form element's content changes
**[Keyboard Event](https://www.w3schools.com/jsref/obj_keyboardevent.asp)**- Events that occur when user presses a key on the keyboard
**[Mouse Event](https://www.w3schools.com/jsref/obj_mouseevent.asp)**- Events that occur when the mouse interacts with the HTML
(mouseenter, mouseleave, mousemove, mouseout, mouseover)
**[Page Transition Event](https://www.w3schools.com/jsref/obj_pagetransitionevent.asp)**- Events that occur when user navigates to, and away from, a webpage
(pagehide, pageshow)
**[Pop State Event](https://www.w3schools.com/jsref/obj_popstateevent.asp)**- Events that occur when the window's history changes
(popstate)
**[Progress Event](https://www.w3schools.com/jsref/obj_progressevent.asp)**- Events that occur when loading external resources
(loadstart)
**[Storage Event](https://www.w3schools.com/jsref/obj_storageevent.asp)**- Events that occur when there is changes in the window's storage area
(storage)
**[Touch Event](https://www.w3schools.com/jsref/obj_touchevent.asp)**- Events that occur when user touches a touch-based device
**[Transition Event](https://www.w3schools.com/jsref/obj_transitionevent.asp)**- Events that occur when a CSS transition runs
(transitionend)
**[Ui Event](https://www.w3schools.com/jsref/obj_uievent.asp)**- Events that are triggered from the user interface 
(abort, beforeunload, error, load, resize, scroll ,select, unload)
**[Wheel Event](https://www.w3schools.com/jsref/obj_wheelevent.asp)**- Events that occur when the mouse wheel is scrolling
(wheel)
**[Event Object](https://www.w3schools.com/jsref/obj_event.asp)** page