target与currentTarget

在符合 DOM2 标准的浏览器中，事件对象都具有以下属性和方法。

target表示当前事件最终捕获到的目标。

<div class="a">
  我是第一个节点 a
  <div class="b">
    我是第二个节点 b
    <div class="c">
      我是第三个节点 c
      <div class="d">
        我是第四个节点 d
        <div class="e">
          我是第五个节点 e
          <div class="f">
            我是最里面的一个元素 f
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="result" style="margin-top: 16px;"></div>

<script>
  var resultEle = document.querySelector('.result');

  document.querySelector('.a').addEventListener('click', function(e) {
    resultEle.innerText = '捕获到的元素类名是' + e.target.className;
  });
</script>

可以看到事件绑定在类名为 a 的节点上，点击其子节点的时候，子节点就是最终捕获到的元素。

通过 currentTarget 可以获取到目前触发事件的元素。

<div class="a">
  我是第一个节点 a
  <div class="b">
    我是第二个节点 b
    <div class="c">
      我是第三个节点 c
      <div class="d">
        我是第四个节点 d
        <div class="e">
          我是第五个节点 e
          <div class="f">
            我是最里面的一个元素 f
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="result" style="margin-top: 16px;"></div>

<script>
  var resultEle = document.querySelector('.result');

  document.querySelector('.a').addEventListener('click', function(e) {
    resultEle.innerText = [
      '当前触发事件的元素的类名是：',
      e.currentTarget.className,
      '。当前捕获到的元素类名是：',
      e.target.className,
    ].join('');
  });
</script>

不论点击的是哪个子节点，currentTarget 都是表示当前触发事件的节点。