Vivek Prasad

Types of DOM Events that can be triggered with Add Event Listener

Vivek Prasad's photo
Vivek Prasad
·

3 min read

We used Add Event Listener several times in Level zero to trigger a function in JavaScript. Adding Event Listeners is the fun part of JavaScript that allows us to recall objects in HTML and CSS and model it the way we want in JavaScript. There are many other events other than click which can be used to add event listeners to DOM.

In this article, we will cover some most frequently used event types and their names that every developer must know to use JavaScript to its full potential.

  • Mouse Events: click, dblclick, mousedown, mouseup, contextmenu, mouseout, mousewheel, mouseover
  • Touch Events: touchstart, touchend, touchmove, touchcancel
  • Keyboard Events: keydown, keyup, keypress
  • Form Events: focus, blur, change, submit - Window Events: resize, scroll, load, unload, hashchange

Mouse events are triggered when a user clicks on an element or when the cursor interacts with the element using a pointing device like Mouse while scrolling or zooming.

Touch events are triggered on touch-enabled devices like Smartphones and Tabs.

  • dblclick event: ondblclick event occurs when the user double-clicks on an element.

  • Mousedown & Mouseup events:A pointing device button is pressed/released on an element.

  • Mouseout event: A pointing device is moved off the element that has the listener attached.

Keyboard events(keydown, keyup, keypress):

Keydown: Any key is pressed.
keyup: Any key is released.
keypress: Any key (except shift, Fn, or capslock) is in the pressed position(fired continuously.)

Form Events(focus, blur, change, submit):

focus: An element that has received focus.
blur: An element that has lost focus.
change: Event that is fired for input, select, and textarea elements when an alteration to the element’s value is done by the user.
submit: The submit button is pressed.

Window Events(resize, scroll, load, unload, hashchange):

resize: This event fires when the document view(window) has been resized.
scroll: Event fires when the document view or an element has been scrolled.
load/unload: The load event is fired when the whole page has loaded, including all resources such as css and images. Unload is when the document or child resource is being unloaded.
hashchange: This event is fired when the identifier of the URL has changed(the part of the URL that begins with a # symbol).

Some other common DOM events that are used are:

error: A resource has failed to load.
abort: The loading fo a resource was aborted.
online: The browser has gained access to the network.
animationstart: This event fires when a CSS animatino has started.

Event Listeners add life to our otherwise boring HTML and CSS pages. They help the developer to get creative and explore different ways in which a user can interact with our website or app. Knowing about different listener types can help you become a Javascript Ninja who is proficient in modelling the objects as per his/her wish.