target和currentTarget区别

当我们在操作DOM时，所有与这个操作DOM的相关信息会被存储在一个事件对象event中，也被称之为e。在这个对象中，包含了这个对象中包含了被发生事件的元素，发生事件的类型以及可能与特点事件相关的其他数据。

下面我们给父盒子绑定了一个点击事件。

 <div class="father">
    <div class="son"></div>
 </div>
 let father = document.querySelector('.father')
 father.addEventListener('click', function (e) {
   console.log(e)
 })

当打印出当前事件对象e时，就会出现所有与父盒子点击事件相关的所有信息。

比如：type，表示事件类型；target 表示目标事件；currentTarget 当前事件处理程序所在的元素。

 

这里我们重点来说一下e.target，可以看出当前它返回的是div.father，表示的是返回触发事件的元素。而与e.target类似的还有一个e.currentTarget，它返回绑定事件的元素。

当给父元素绑定了点击事件，而点击了子元素时，会根据事件流的冒泡阶段去找到了父元素，父元素恰好绑定了这个点击事件，就会触发。所以，这里的target指向的是触发事件的子元素，而currentTarget指向的是绑定事件的父元素。

 father.addEventListener('click', function (e) {
   console.log(e.target)
   console.log(e.currentTarget)
 })

 所以说，target指向的是事件的触发者，而currentTarget指向的是事件的绑定者。