e.target和e.currentTarget的区别

事件冒泡

如图所示，有两个div。大div（outer）包裹小div（inner），当使用onclick事件点击inner时，就会产生事件冒泡

代码示例

<div id="app">
    <div class="outer" @click="outer">
      outer
      <div class="inner" @click="inner">
        inner
      </div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        outer() {
          console.log('outer')
        }
        inner() {
          console.log('inner')
        },
      }
    })
  </script>

当我点击inner时，打印出来的是

e.target

表示触发事件的源头元素（目标元素），也就是当前的点击元素

e.currentTarget

表示当前执行事件处理程序的元素（当前目标元素），也就是事件绑定在谁身上就是谁

代码示例

 <div id="app">
    <div class="outer" @click="outer">
      outer
      <div class="inner" @click="inner">
        inner
      </div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        outer(e) {
          console.log('outer', e.target, e.currentTarget)
        },
        inner(e) {
          console.log('inner', e.target, e.currentTarget)
        }
      }
    })
  </script>

打印结果解析

① 当点击inner时，有冒泡行为，此时inner的target为inner，currentTarget为inner。 outer的target为inner，currentTarget为outer。

② 当点击outer时，无冒泡，此时outer的target为outer，currentTarget为outer。