当前位置: 代码迷 >> 综合 >> DOM事件中target和currentTarget的区别
  详细解决方案

DOM事件中target和currentTarget的区别

热度:99   发布时间:2024-01-28 11:24:35.0
  • target是事件触发的真实元素

  • currentTarget是事件绑定的元素

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

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

    • 当事件是子元素触发时,currentTarget为绑定事件的元素,target为子元素
    • 当事件是元素自身触发时,currentTarget和target为同一个元素。
      <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);      //trueconsole.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);      //trueconsole.log(e.target === e.currentTarget);        //falseconsole.log(e.target === this);           //false}</script>

       

  相关解决方案