• DOM事件中target和currentTarget的区别


    DOM事件中targetcurrentTarget的区别

    • target是事件触发的真实元素

    • currentTarget是事件绑定的元素

    • 事件处理函数中的this指向是中为currentTarget

    • currentTargettarget,有时候是同一个元素,有时候不是同一个元素 (因为事件冒泡)

      • 当事件是子元素触发时,currentTarget为绑定事件的元素,target为子元素
      • 当事件是元素自身触发时,currentTargettarget为同一个元素。
    <body>
       <ul id="box">
           <Li id="apple">苹果</Li>
           <li>香蕉</li>
           <li>桃子</li>
       </ul>
    </body>
    <script type="text/javascript">
       var box = document.getElementById('box');
       var apple = document.getElementById('apple');
    
       //直接绑定在目标元素apple上
       apple.onclick = function (e){  
           console.log(e.target);          //<li id="apple">苹果</li>
           console.log(e.currentTarget);    //<li id="apple">苹果</li>
           console.log(this);               //<li id="apple">苹果</li>
           console.log(e.target === e.currentTarget);      //true
           console.log(e.target === this);           //true
       } 
    
      //绑定在父元素box上(如果点击apple这个li时)
       box.onclick = function (e){
           console.log(e.target);           // <li id="apple">苹果</li>
           console.log(e.currentTarget);       //<ul id="box">...</ul>
           console.log(this);                  //<ul id="box">...</ul>
           console.log(e.currentTarget===this);      //true
           console.log(e.target === e.currentTarget);        //false
           console.log(e.target === this);           //false
       }
    
    </script>
    
  • 相关阅读:
    能者摹形 大师窃意
    Nginx负载均衡的详细配置及使用案例详解.
    Zookeeper 4、Zookeeper开发
    nginx负载均衡
    Git:husky > npm run s precommit
    关于数据库路径 DataDirectory
    关于在VS2010 ASP.NET MVC3中使用WebService的实例
    SQLite的SQL语法
    获取IE可见高度和内容高度 记录
    转文:ASP.NET运行机制原理
  • 原文地址:https://www.cnblogs.com/guojiabing/p/12213332.html
Copyright © 2020-2023  润新知