jQuery如何使用event.currentTarget属性?用法示例

2021年4月2日10:37:06 发表评论 1,123 次浏览

jQuery中的event.currenttarget属性用于在事件冒泡阶段返回当前DOM元素。

event-currentTarget通常等于" this "。

语法如下:

event.currentTarget

参数:

  • 事件:它是必填参数, 该参数来自事件绑定函数。

示例1:

<!DOCTYPE html>
<html>
  
<head>
     <title>
       jQuery event.currentTarget Property
   </title>
     <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
   </script>
    
   <script>
         $(document).ready(function() {
           $("h1, h2, p").click(function(event) {
              alert(event.currentTarget === this);
             });
         });
     </script>
</head>
  
<body>
     <center>
         <h1 id = "geeks1" style = "color:green;">
           lsbin
       </h1>
         <h2 id = "geeks2">
           jQuery event.currentTarget Property
       </h2>
         <p>
           <b>Note:</b> Click on each HTML element.
       </p>
     </center>
</body>
  
</html>

输出如下:

点击前:

jQuery | event.currentTarget属性1

单击任何元素后:

jQuery | event.currentTarget属性2

示例2:

<!DOCTYPE html>
<html>
  
<head>
     <title>
       jQuery event.currentTarget Property
   </title>
    
     <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
   </script>
   
   <script>
         $(document).ready(function() {
          $("h1, p").click(function(event) {
              alert(event.currentTarget.innerHTML);
             });
         });
     </script>
</head>
  
<body>
     <center>
         <h1 id = "geeks1" 
             style = "color:green;">
           lsbin
       </h1>
         <h2 id = "geeks2">
           jQuery event.currentTarget Property
       </h2>
         <p>
         <b>Note:</b> Click on each HTML element.
       </p>
     </center>
</body>
  
</html>

输出如下:

点击前:

jQuery | event.currentTarget属性3

单击lsbin之后:

jQuery | event.currentTarget属性4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: