How to get the class of a element which has fired an event using JavaScript/JQuery?

Last Updated : 20 Jun, 2024

One can use JavaScript and JQuery to retrieve the class of an element that triggers an event. By capturing the event and accessing the class attribute, developers can dynamically identify the specific element involved in the interaction.

Below are the methods to get the class of an element that has fired an event:

Table of Content

Using JavaScript
Using JQuery

Method 1: Using JavaScript

In this approach, we are using the JavaScript onClick() event. The this.getAttribute('class') method enables the retrieval of the class of the element that triggered the event. When a user interacts with any element, the click event is triggered, allowing us to capture the class of the respective element. To obtain the class name of the specific element, utilize the syntax `onClick = function(this.getAttribute('class'))`.

Example: To demonstrate getting the class of the element that has fired an event using JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Getting the class of the element that
        fired an event using JavaScript.
    </title>
    <style>
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }

        #gfg {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <p>
        Click on the DIV box or button to get Class of
        the element that fired click event.
    </p>
    <div class="DIV" id="div" onClick="GFG_click(this.getAttribute('class'));">
        This is Div box.
    </div>
    <br />
    <button class="button" id="button"
        onClick="GFG_click(this.getAttribute('class'));">
        Button
    </button>
    <p id="gfg"></p>
    <script>
        let el_down = document.getElementById("gfg");
        function GFG_click(className) {
            // This function is called, when the 
            // click event occurs on any element.
            // get the classname of element.
            el_down.innerHTML = "Class = " + className;
        }
    </script>
</body>

</html>

Output:

Using JQuery

In this approach, the onClick() event is utilized, triggering when a user interacts with an element. The $(this).attr('class') method retrieves the class of the element on which the event occurred, enabling the identification of the triggering element's class. To retrieve the class of the element that fired the event, the syntax onClick = function($(this).attr('class')) is used.

Example: To demonstrate getting the class of the element that has fired an event using JQuery.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Getting the class of the element that
        fired an event using JavaScript.
    </title>
    <style>
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }

        #gfg {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>

<body style="text-align: center;">
    <p>
        Click on the DIV box or button to get
        Class of the element that fired click event.
    </p>
    <div class="DIV" id="div" onClick="GFG_click($(this).attr('class'));">
        This is Div box.
    </div>
    <br />
    <button class="button" id="button"
        onClick="GFG_click($(this).attr('class'));">
        Button
    </button>
    <p id="gfg"></p>
    <script>
        let el_down = document.getElementById("gfg");
        function GFG_click(className) {
            // This function is called, when the 
            // Click event occurs on any element.
            // Get the class Name.
            el_down.innerHTML = "Class = " + className;
        }
    </script>
</body>

</html>