DEV Community

Margaret W.N
Margaret W.N

Posted on


DOM events, eloquent Javascript, Day 85

A user interacts with a web page through several actions that may include, clicking a button, scrolling down a page or keying in a value. It is important to understand and take note of these actions to determine how to respond to them.

What's a DOM event?

DOM (Document Object Model) events are actions that occur as a result of the user action or as a result of state change of the elements of a DOM tree.

In a nutshell, it is the program's interpretation of a users action on elements of a DOM.

Examples of DOM events and their triggers.

click - when a user clicks on an element.
keydown - when a user presses a key.
keyup - when a user releases a key.
mouseup- when a mouse button is released.
mousedown - when a mouse button is pressed.
mousemove - when a mouse pointer moves.
scroll - when a user scrolls an element.
focus - when an element has received focus.
blur- when an element loses focus.
load- when a page finishes loading.
beforeunload - when a page is closed.

Touch interaction events
touchstart - when a finger starts touching a screen. 
 touchmove- when a finger is moved while touching the screen
 touchend - when a finger stops touching a screen

How do we respond to DOM events?

Since you have an idea of some of the events that might be triggered, you can move ahead to listen for this events. addEventListener() is an inbuilt javascript method used to listen for events. It takes two parameters, the event, and a callback function. The latter is where you define how you want to respond to an event.

Default behaviour

Events in javascript have a default behaviour that may hinder your intended response to the event. Imagine a scenario where you intend to perform a computation on form data before submitting. The submit event will automatically submit this the data when triggered. To prevent this default behaviour, you can call event.preventDefault() in the callback function of an event listener.

Done for the day
Day 85

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!