zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    PHP错误报告级别及调整方法
    使用微妙计算PHP脚本执行时间
    修改PHP的默认时区
    Rabbimq 安装过程,还有踩得坑!centos 安装
    "services "kubernetes-dashboard" not found"
    转载
    安装php rabbitmq扩展,继上一篇安装Rabbitmq
    php hash_file
    composer 安装
    php 朴韩屏
  • 原文地址:https://www.cnblogs.com/guojiabing/p/12213332.html
Copyright © 2011-2022 走看看