How to get the class of a element which has fired an event using JavaScript/JQuery?
Last Updated :
12 Jul, 2025
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:
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:
OutputUsing 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>
Output:
Output
Similar Reads
How to attach an event to an element which should be executed only once in JavaScript ? In this article, we will learn how to attach an event to an element which should be executed only once. There are two approaches that can be used here: Approach 1: In this approach, we will be using the jQuery one() method. This method attaches an event to the element with the specified selector. It
3 min read
How to find the class of clicked element using jQuery ? In this article, we will find the class of the clicked element using jQuery. To find the class of clicked element, we use this.className property. The className property is used to set or return the value of an element’s class attribute. Using this property, the user can change the class of an eleme
1 min read
How to Test if an Event Handler is Bound to an Element in jQuery (JavaScript)? To test if an event handler is bound to an element in jQuery, you can use a few simple methods. These help you check if an event listener is attached to an element, which is useful for debugging.Using .data() to Check Event HandlersYou can use the .data() method to check if any event handlers are as
2 min read
How to get the type of DOM element using JavaScript ? The task is to get the type of DOM element by having its object reference. Here we are going to use JavaScript to solve the problem. Approach 1: First take the reference of the DOM object to a variable(Here, In this example an array is made of IDs of the element, then select random ID and select tha
2 min read
How to get the type of DOM element using JavaScript ? The task is to get the type of DOM element by having its object reference. Here we are going to use JavaScript to solve the problem. Approach 1: First take the reference of the DOM object to a variable(Here, In this example an array is made of IDs of the element, then select random ID and select tha
2 min read
How to get the outer html of an element using jQuery ? Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to
2 min read