e.target 和 e.currentTarget 区别

最新推荐文章于 2024-07-06 12:08:37 发布

ggxr00

最新推荐文章于 2024-07-06 12:08:37 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/ggxr00/article/details/87274021

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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 –