Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display the tag name of the clicked element using jQuery?
In this article, we will learn how to display the tag name of the clicked element using jQuery, and with the help of click event listeners.
jQuery is a popular JavaScript library that makes it easy to manipulate HTML elements on a web page or listen to user actions like click events and do some operation based on that action..
Let’s understand how we can achieve the above with the help of some examples.
Example 1
In this example, we will add a heading, some text, and a list of items to the HTML document. And to display the tag name of the clicked element using jQuery, we will add some JavaScript code that listens for click events on the elements and displays their tag names.
Filename: index.html
<html lang="en">
<head>
<title>How to display the tag name of the clicked element using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>How to display the tag name of the clicked element using jQuery?</h3>
<p>Click on any element to display its tag name</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<script>
$(document).ready(function() {
$('*').click(function(event) {
event.stopPropagation();
var tagName = $(this).prop('tagName');
alert('You clicked on a ' + tagName + ' element.');
});
});
</script>
</body>
</html>
Example 2
In this example, we will use 3 different methods to display the tag name of the clicked element, using even.target and event.currentTarget properties, and this keyword. These methods demonstrate different ways to display the tag name of the clicked element using jQuery.
Filename: index.html
<html lang="en">
<head>
<title>How to display the tag name of the clicked element using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>How to display the tag name of the clicked element using jQuery?</h3>
<p>Click on any element to display its tag name</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<script>
$(document).ready(function() {
// Example 1: Using event.target
$('*').click(function(event) {
event.stopPropagation();
var tagName = event.target.tagName;
alert('You clicked on a ' + tagName + ' element.');
});
// Example 2: Using this keyword
$('*').click(function() {
var tagName = $(this).prop('tagName');
alert('You clicked on a ' + tagName + ' element.');
});
// Example 3: Using event.currentTarget property
$('*').click(function(event) {
event.stopPropagation();
var tagName = event.currentTarget.tagName;
alert('You clicked on a ' + tagName + ' element.');
});
});
</script>
</body>
</html>
Conclusion
In this article, we learned how to display the tag name of the clicked element using jQuery By using the different code examples provided in this article and utilizing properties such as event.target, and keywords such as “this”. Displaying the tag name of the clicked element using jQuery is a simple and useful technique that can be used to provide feedback to the user and to debug web pages.
140 Views
