JavaScript Event Properties

When a user or browser does something on an HTML DOM element, JavaScript events are provoked. It will allow you to carry out specific tasks.
On each event, you will receive an object with specific properties that can be used to handle the event trigger and perform conditional code.

Here are some useful Event properties,

This property returns the value of the key pressed by the user during the event trigger. It can be used on such case, when you need to handle “enter”, “ctrl”, “alt” etc. key press event.

“which” property is also similar to this, it represents the a number that indicates which key was pressed during the event.

This property will return boolean value representing that the event is triggered by touch inputs or not. This can be differentiated depending on whether the specific events are triggered by touch or mouse input.

Example,

The cancelable event property returns a Boolean value indicating if an event can be cancelled or not. The event is cancelable then and then it can be possible to prevent the default action of that event, that means then only event.preventDefault() method will work.

so before using e.preventDefault() method, make sure the specified event is cancelable.

When there are nested HTML elements with event listeners, these properties can be used to define whether the child event or the parent event should be called first.

Here, one example having parent-child having their separate events. if you do not use event.stopPropagation() then it will execute the child method as well parent method in a child to parent manner.

you can use cancelBubble property instead of stopPropagation() method. it will prevent the bubbling of that triggered event.

Bubbles can be used to determine whether or not the triggered HTML element enables bubbling.

By registering listeners to a specific HTML element, you can change the bubbling behavior of that element.

It represent the DOM element from which that event got triggered. This property having multiple child properties such as

Represents the id attribute of that target HTML element.

Represents the name attribute of that target HTML element.

Represents the HTML content inside that HTML element.

Represents the text content inside that HTML element.

Represents the mode of that input HTML element in case that event is triggered from any input element.

Represents the defined max length of that element.

Represents the HTML content of the parent tag.

Represents the current URL of the page from which that that trigger has been fired.

All events associated with that element can be found within the target property, such as onFocus, onClick, onscroll, onwheel, and many more.

There are many more things you can use from the “event” object, do code and explore more! enjoy JavaScript!

Related posts:

There are different types of wisdom that influence and guide us in our daily lives. Many of us are familiar with these levels of learning. However, understanding spiritual wisdom requires time and a…

What you should know about Pygame as a beginner to programming and game development in Python.

The tragic incident occurred yesterday morning at around noon on Anfu Road. The woman crashed through a glass awning before landing on a security guard who happened to be standing at the wrong place…