jQuery 如何显示被点击元素的标签名

在本文中，我们将学习如何使用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() { // 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>