e.target和e.currentTarget区别

如果事件处理程序并未绑定在目标元素，而是在其祖先元素上时，那么target则指向的是该目标元素，而currentTarget指向的是当前绑定事件的祖先元素。

<template>
  <div id="container" @click="foo">
    <div id="box"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '我是data中的id'
    }
  },
  methods: {
    foo(){
      alert(e.target.id);
      alert(e.currentTarget.id);  // 'container'
    }
  }
}

此时，只要foo()执行，那么e.currentTarget.id的值必然是container，因为currentTarget永远指向的是事件所绑定的元素（这里点击事件直接绑定在container元素上）。

但是target则不同，它指向的是事件实际执行所在的元素，所以本例中e.target.id的值取决于鼠标直接所点击的元素。

① 鼠标直接点击container元素，也就是红色部分

这时 target 和 currentTarget 均指向的是container元素，因为事件执行的目标和事件绑定的目标是相同的，都是container元素。

alert(e.target.id);  //  'container'

② 鼠标直接点击box元素，也就是绿色部分

这时 target 指向的是box元素，而 currentTarget 指向的是container元素，因为事件执行的直接目标是box元素。

alert(e.target.id);  //  'box'