博客

e.target 和 e.currentTarget 区别

  • Post author:
  • Post category:其他




e.target

触发事件的对象 (某个DOM元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时，它与event.currentTarget不同。


event.target 属性可以用来实现事件委托 (event delegation)。



e.currentTarget

返回绑定事件的元素


当事件遍历DOM时，接口的currentTarget只读属性Event标识事件的当前目标。它始终引用事件处理程序附加到的元素，而不是Event.target标识事件发生的元素。



========================================================================================================================


currentTarget始终是倾听事件的对象; target是接收事件的实际目标。每个事件冒泡，目标接收事件并且它在显示列表中冒泡。（或者事件捕获的另一种方式） 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script type="text/javascript">
    var oUl = document.getElementsByTagName("ul")[0];
    var aLi = oUl.getElementsByTagName("li");
    // 事件委托
    oUl.addEventListener("click", function(e) {
      let li1 = e.target;
      let li2 = e.currentTarget;
      console.log(li1);  // li
      console.log(li2);  // ul
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script type="text/javascript">
    var oUl = document.getElementsByTagName("ul")[0];
    var aLi = oUl.getElementsByTagName("li");
    for(let i = 0; i < aLi.length; i++) {
      aLi[i].onclick = function(e) {
        let li1 = e.target;
        let li2 = e.currentTarget;
        console.log(li1);  // li
        console.log(li2);  // li
      }
    }
  </script>
</body>
</html>

参考自–

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target

–

–

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

–


版权声明：本文为ggxr00原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。