What Are DOM Events?
DOM Events are signals that show something happened on the web page. There are a LOT of different events. Some of the most common events are:
- Mouse events like click, mouseover, mouseout and mousemove.
- Keyboard events like keydown and keyup.
- Form events like input and submit.
- Media events like when a video or audio is played or paused.
- Document events like DOMContentLoaded.
There Are so many different events that you can use. You can see a list of them here.
How to Handle Events
We might be interested in specific events on specific elements, and might wanna run some JavaScript when it happens. This is called event handling. There are two ways to handle an event.
- Using an HTML on<event> attribute
- Using the addEventListener method
Using on<event> HTML Attribute
The old way of handling events is to set an HTML attribute like onclick or onload on the element. For instance if there’s a button and we wanna do something when it’s clicked, we can do it like this:
<input value=”Click me” onclick=”alert(‘Click!’)” type=”button”>
Or if we wanna run a function when the document is loaded we can use the onload attribute on the body tag:
<body onload=”checkCookies()”>
Note that here we’re using an HTML attribute, just like src, alt or id. The only difference is that here the name of the attribute is on+event name and the value of the attribute is some JavaScript code.
This way of handling DOM events is old, limited and not recommended anymore. The main limitation is that there’s no way to attach multiple handlers to a specific event on an element.
The newer and recommended way of handling events is to use addEventListener.
Using addEventListener
This is the recommended way of attaching an event listener to an element.
element.addEventListener(event, function, useCapture)
The addEventListener method accepts three parameters. The first two are required and the third one (useCapture) is optional.
The first parameter is the name of the event. The second parameter is the name or definition of the function that is executed whenever the event happens. In other words, it’s the event handler. The third (optional) parameter is to specify whether this handler should run in the capture phase or the bubbling phase.
Event Bubbling
Every event has 3 phases:
- Capture Phase
- Target Phase
- Bubbling phase
Imagine the user clicks on a link which is in a div, which is in the header. The first phase of the event (Capture phase) starts from the outermost element which is the window. Then it’ll come down to the document and then to the HTML element. This phase continues down the DOM tree until it reaches the target element which is the link clicked. In other words, the capture phase moves from top of the DOM tree to bottom, until it reaches the target element.
So the capture phase may look something like this:
Window > Document > HTML > Body > Header > Div > a tag
The second phase of the event (Target phase) happen on the target of the event. In our example, this’ll be the clicked link.
The third phase of the event starts from the target element and goes up to all parents. So it might look similar to this:
a tag > Div > Header > Body > HTML > Document > Window
Note that capture and bubbling phases only make sense when you’re attaching the event listener to a parent element of the target element and not the target element itself. These two phases can be used to run the handler attached to the parent element before or after running the handler attached to the target element.
You can decide in which phase a specific event handler will be run, using the third (optional) parameter in addEventListener which is usecapture. If it is false (default) the handler will run in the bubbling phase. In other words if the third parameter is set to false (or isn’t set at all) and the specified event (for instance click) happens on a child element of this element and there’s another event handler set on that child element, the handler on the parent element will run after the handler of the child element.
On the other hand, if the usecapture parameter is set to true, then that event handler will fire on capture phase. So if we set the handler on a parent element of the target element, and the target element has its own event handler, the handler on the parent element will run before the handler on the target element.
stopPropagation
You can stop the propagation of the event using the stopPropagation method on the event. If you stop the event propagation on a parent element in the capture phase, none of the child elements will see the event, and if stop propagation on a child element in the bubbling phase, none of the parent elements will see the event.
Target vs Current Target
The target property of the event (event.target) always refers to the target element. (The element that the event actually happened on) even if the event listener is attached to one of its parent elements. On the other hand the current target property (event.currentTarget) refers to the element to which the event listener is attached to. This may be a parent element of the actual target element.
In other words, while the event is capturing or bubbling, the target element remains the same, but the current target changes.
Tip: Instead of e.currentTarget you can also use the “this” keyword.
Summary
In this article, we went over DOM events and how we can respond to them.