In the previous article, we saw an incredible usage of the target property on event object for event delegation. In this article, we are going to explore some more interesting properties and methods of it.

Read all articles from this series

EVENT Object

At the start of the event life cycle, an object is created and sent along its way in all the phases. Every element in the path of an event journey receives this argument in the callback of the event listener.

In the listener callback, we can use this object to access properties or to modify the behavior of the event. It is literally the same object which gets passed to different callbacks. i.e. if we add a property on this object in one callback, we can later access it in the next callback in the same phase.

Here we will cover the following properties and methods.

• type
• eventPhase
• target
• currentTarget
• preventDefault()
• stopPropagation()
• stopImmediatePropagation()

This is the pen where you will find all the code for reference.

1) type

This property contains the type of event as its value. e.g. click, keypress, mouseup, etc. This is useful if we are using a common callback function for more than 1 event listener. There we may need to check the type for code branching logic.

2) eventPhase

This property contains an integer corresponding to the current phase of the event as its value.

• 0: NONE
• 1: CAPTURE
• 2: TARGET
• 3: BUBBLE

Read more about EVENT PHASES.

3) target

This property holds a reference to a DOM element on which the event actually occurred. We need this reference in the CAPTURE or BUBBLE phase in order to implement EVENT DELEGATION.

4) currentTarget

This property holds the reference to a DOM element where the event listener is registered.

e.g. Consider a case where an event has occurred on the child element but the listener is registered on its parent. Now the child becomes the target whereas the parent becomes the currentTarget.

5) preventDefault()

Many HTML elements cause browsers to take certain actions in response to specific events. e.g. Click on a checkbox causes it to change its background and put a tick in the box. Or clicking an anchor link changes the browser URL.

This is called the default behavior of that particular element. Now, due to some UI requirements, we may need to tell the browser to skip such default behaviors.

We can do so by calling preventDefault() on the event object. But in such cases, it is our duty to provide necessary feedback to the user.

6) stopPropagation()

We know how an event flows through various phases. If we want to stop this propagation at any point in time, then we can call the stopPropagation() method from the event object.

This method stops the propagation of an event into the next level but executes all the handlers at the same level.

e.g. If a button has 2 click listeners and its parent has 1 click listener in the bubble phase, then calling stopPropagation() in any of the button's click listener will stop events propagation in the bubble phase. But it will execute both click listeners on the same level.

7) stopImmediatePropagation()

This property stops the event flow altogether. It ensures that no other listener will be called for the event after finishing the current event listener.

Finally...

There are many more properties and methods on the Event Object. It is definitely worth going through the documentation for them.

Now that we know the common properties of Event Object, it is time to look at event-specific properties and behavior of different types of events such as Mouse, Keyboard, Form, etc. Getting familiar with different types of events helps us create a more engaging experience for our users.

So stay tuned for more cool stuff like this...