Check if event.target has a Specific Class Using JavaScript

Sometimes, the programmer may want to check if the element that triggered the event (the event.target) matches the selector they care about. How to do this? JavaScript offers some predefined methods such as “contains()” and “matches()” methods to identify the specific selector in a target event.

This post will explain the methods to determine whether the event.target has a particular class or not using JavaScript.

How to Check if event.target has a Specific Class Using JavaScript?

To determine if the event.target has a particular class, use the following JavaScript predefined methods:

• contains() method
• matches() method

Let’s see how these methods work for determining class in an event.target.

Method 1: Check if event.target has a Specific Class Using contains() Method

To determine whether an element belongs to a specific class, use the “contains()” method of the “classList” object. The contains() method is used to identify whether a specified item is present in the collection. Its outputs “true” if the item is present, else, it gives “false”. It is the most efficient way for determining an element’s class.

Syntax

Follow the below-given syntax to determine whether the event.target has a specific class or not using the contains() method:

In the above syntax:

• “event.target” is a triggered event that will be checked whether it contains the specific class or not.
• The “class-name” identifies the name of the CSS class that is a part of the triggered event.

Return value

It returns “true” if the triggered event has the specified class; otherwise, it returns “false”.

Example

First, create three “div” elements in an HTML file using the HTML <div> tag:

Style the elements using CSS styling. To do so, create a CSS class “.div” for all the div elements:

Create a “.center” class for setting the elements in the center of the page:

Now, for styling, every div individually creates a CSS class for them. For the first div, set the background color “red” in the “div1Style” class:

For the second div, set the background color “radish pink” using the “rgba(194, 54, 77)” code in the “div2Style” class:

Set the background color “pink” of the third div by creating the “div3Style” class:

After running the above HTML code, the output will look like this:

Now, in a JavaScript file or a “script” tag, use the below-provided code to check whether the event.target has a specific class or not:

In the above code snippet:

• First, attach an event listener on a click event that will handle every click on DOM.
• Then, check whether the triggered event has the CSS class “center” or not with the help of the “classList.class()” method.

Output

The above GIF shows that div1 contains the “center” class as it shows “true”, while div2 and div3 display “false” in the alert box, which means they do not contain the “center” class.

Method 2: Check if event.target has a Specific Class Using matches() Method

Another JavaScript predefined method called “matches()” can be used to check whether a specific class belongs to an element or an event. The “class-name” is the only parameter needed to determine whether an element or a target event includes a certain class or not.

Syntax

The below-given syntax is utilized for the matches() method:

In the above syntax,

• “event.target” is a triggered event that will be checked whether it contains the specific class or not.
• The “class-name” indicates the name of the CSS class that is a part of the triggered event. The matches() method takes the class’s name together with a dot (.) that denotes the word “class”.

Return value

If the target event has a class, it returns “true” else, “false” is returned.

Example

In a JavaScript file or a script tag, use the below lines of code to check whether the event.target has a specific class or not by using the “matches()” method:

In the above lines of code:

• First, attach an event listener on a click event that will handle every click on DOM.
• Then, check whether the “div3Style” CSS class exists in a triggered event using the “matches()” method.
• If it is present, the alert() shows a message with “true”, else “false”.

Output

The above GIF shows that only div3 contains the “div3Style” class as it shows “true”.

Conclusion

To determine whether a triggered event has a specified class, use the JavaScript “contains()” method or the “matches()” method. However, the contains() method is one of the most useful approaches used to determine an element’s class. Both methods return “true” if the triggered event has a class else “false” is returned. This post explained the methods to determine whether the event.target has a particular class or not using JavaScript.