Ant-design Button onClick 获取按钮的目标

用 React 的 Ant-Design 发现的 Button 获取 onClick 的 e.target 的时候经常会出问题，发现 Antd 封装的 Button 是一个 button 里面还有 span，如果点击的是按钮上的文字的话，获取的是 span，这个时候 e.target 是不起作用的。可以用 e.currentTarget。这两者有什么区别呢？如下：

event.target

This property of event objects is the object the event was dispatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the event.

event.currentTarget

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

读定义总是很绕，要彻底了解这两者的区别，我们要先了解浏览器中事件传递的机制冒泡和捕获。

冒泡和捕获

在页面中点击一个元素，事件是从这个元素的祖先元素中逐层传递下来的，这个阶段为事件的捕获阶段。当事件传递到这个元素之后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡阶段。

我们为一个元素绑定一个点击事件的时候，可以指定是要在捕获阶段绑定或者换在冒泡阶段绑定。 当addEventListener的第三个参数为true的时候，代表是在捕获阶段绑定，当第三个参数为false或者为空的时候，代表在冒泡阶段绑定。

知道事件有这么一个穿透的过程之后，结合下面的例子，就可以很好来理解event.target和event.currentTarget：

<div id="a">
    <div id="b">
      <div id="c"