[JS 基础][DOM]event.target-与-event.currentTarget-的区别、实际应用

需求

如上图所示，「关闭按钮」里有一个用 SVG 实现的「X」
点击「关闭按钮」的时候，希望能获取 <close-btn name="close-btn"> 组件上的name属性，通知服务端，或者透传给客户端（交由客户端做进一步的相应事件，比如关闭页面）

onClick={event => {
   event.target
   event.currentTarget
}}

遇到的困难

在点击「关闭按钮」时候，点击的元素不一定是「关闭按钮」，很有可能是点击了「SVG-X」，但是 svg 上并没有我们需要的 name 属性。因此我们需要找到真正触发 clickEvent 的元素(也就是 elemnt.addEventListener('click', callback) 的 element)。也就是我们想要的是绑定了事件的父元素，而非子元素
event.target 大部分时候获取到的都是 svg 元素，只有点击了 X 之间空白的时候，event.target 才是 close-btn。因此此方法并不合适

解决方案

event.currentTarget

currentTarget始终是监听事件者（谁身上绑定了 eventListener），而target是事件的真正发出者(鼠标点击的元素），具体参加下文：

juejin.im/post/59f16f…

codesandbox: codesandbox.io/s/strange-a…

import Vue from "vue";

new Vue({
  render: h => (
    <div>
      <div
        name="外层容器"
        onClick={e => {
          console.log(e.currentTarget, "currentTarget");
          console.table({
            target: e.target,
            name: e.target.getAttribute("name"),
            // emm 很奇怪。console.table 竟然打印不出来emm
            currentTarget: e.currentTarget,
            "currentTarget-name": e.currentTarget.getAttribute("ele-tag")
          });
        }}
      >
        <div
          name="内部容器"
          style="width:100px; height:100px;border: 1px solid red;"
        >
          内部容器
        </div>
      </div>
    </div>
  )
}).$mount("#app");