如何使用 jQuery 显示被点击元素的标签名称?

jqueryweb developmentfront end technology

在本文中，我们将学习如何使用 jQuery 并借助点击事件监听器显示被点击元素的标签名称。

jQuery 是一个流行的 JavaScript 库，它可以轻松地操作网页上的 HTML 元素，或监听用户操作(例如点击事件)并基于该操作执行某些操作。

让我们通过一些示例来了解如何实现上述目标。

示例 1

在本例中，我们将向 HTML 文档添加一个标题、一些文本和一个项目列表。为了使用 jQuery 显示被点击元素的标签名称，我们将添加一些 JavaScript 代码来监听元素上的点击事件并显示它们的标签名称。

文件名: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>

示例 2

在本例中，我们将使用 3 种不同的方法来显示被点击元素的标签名称，包括 even.target 和 event.currentTarget 属性以及 this 关键字。这些方法演示了使用 jQuery 显示被点击元素标签名称的不同方法。

文件名: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() {
        // 示例 1:使用 event.target
        $('*').click(function(event) {
           event.stopPropagation();
           var tagName = event.target.tagName;
           alert('You clicked on a ' + tagName + ' element.');
        });

        // 示例 2:使用 this 关键字
        $('*').click(function() {
           var tagName = $(this).prop('tagName');
           alert('You clicked on a ' + tagName + ' element.');
        });

        // 示例 3:使用 event.currentTarget 属性
        $('*').click(function(event) {
          event.stopPropagation();
          var tagName = event.currentTarget.tagName;
          alert('You clicked on a ' + tagName + ' element.');
       });
      });
   </script>
</body>
</html>