ADDEVENTLISTENER

Event listeners are what make Javascript dynamic and fun. It allows the developer to be creative and experiment with their application to make it interesting and expressive. There are all kinds of keyword events that just about allow the user to do anything to interact with the browser.

The addEventListener() is an inbuilt function in JavaScript which takes the event to listen for, and a second argument to be called whenever the described event gets fired. Any number of event handlers can be added to a single element without overwriting existing event handlers.

Here are some of the most common event types and event names:

• 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.

Touch events are triggered on touch-enabled devices such as smartphones, tablets, and touch-screen laptops. Mouse events are triggered on the majority of all browsers and devices. The MouseEvent interface represents events that occur due to the user interacting with a pointing device.

The click event: The onclick event occurs when the user clicks on an element.

The 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):

• Keydown: Any key is pressed.

• keyup: Any key is released.

Form Events(change, submit):

• 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.

DOM events that are used are:

• error: A resource has failed to load.

• online: The browser has gained access to the network.

Window Events(resize, load, unload):

• resize: This event fires when the document view(window) has been resized.

• 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.