关于event.currentTarget和 event.target的实际区别

相信很多初识事件监听的朋友们，还分不清楚，event.currentTarget和event.target的区别。看一下下边代码，你大概就能对这两个event属性有了大致的了解。

关于event里的target属性

首先我们要知道，event是什么（在JS中运行）

 let divEle = document.getElementsByTagName("div")[0];
divEle.style.backgroundColor = "cyan";
divEle.style.width = 100 + "px";
divEle.style.height = 100 + "px";
divEle.addEventListener("click", e => {
    let event = e || window.event;
    console.log(event);
})

此时点击在html生成的div块中，我们会得到一个关于event的对象，这里面的属性，而如果我们使用target很多人甚至都不明白，target到底是什么属性
target属性

这里面有很多属性，但是我们通常使用都是为了，第一个属性，返回的值div，这时，才出现了内置属性event.target的含义，触发事件的节点（内置属性，系统自带的内部属性）

• event.target在事件里的指向
  由于触发事件的节点中存在可能重复且重名的节点，开发人员通常会在event.target后使用localName，id，className，value种种不同属性来指向触发事件的具体节点（在单节点中就不会出现event.target指向性错误）

关于event里的currentTarget属性

• event.currentTarget在事件里的指向
  理解这个属性很简单，绑定事件的节点中，使用event.currentTarget返回的是绑定事件的节点

具体差别

从描述上我们甚至看不出具体差别，但是如果我们从需求上看，你就能快速明白，差别是什么。
需求：循环渲染一个div盒子，在这个div盒子上绑定一个自定义属性和值，但是这个div盒子中还有子元素。如果使用 event.Target 的话就容易出现：当鼠标点击在子元素的时候就获取不到我在父元素上绑定自定义属性的值，这时候使用 e.currentTarget 不管点击的是父元素（绑定自定义的属性）还是子元素，函数内所拿到的 event 都是在绑定点击事件的标签处传过来的！
所以，通俗来讲，

• event.target返回的是，触发事件的元素
• event.currentTarget返回的是，绑定事件的元素

总结

如果说是一个单标签绑定的事件 可以使用以上任意两种方法都是可行的；

如果你所绑定事件的标签内还有多个子标签的话建议使用 event.currentTarget。或者使用事件监听
，这样，event.currentTarget就能拿到绑定事件的节点，而在其下的各种后代节点就可以用event.target.（各种类名，id，标签名，属性值）来具体指向到触发事件的节点！