React.js-基础知识篇

React 中 事件对象event的currentTarget和target属性的区别。

在React中，事件对象的currentTarget和target属性都代表事件的目标元素，但是它们的具体含义有所不同：

• currentTarget属性代表事件处理函数所绑定的元素，即当前正在处理事件的元素。

• target属性代表触发事件的元素，即事件最初发生的元素。

因此，如果事件处理函数绑定在某个元素上，并且事件冒泡到了该元素，则currentTarget和target属性的值是相同的。但是，如果事件处理函数绑定在某个祖先元素上，并且事件冒泡到了该元素，则currentTarget属性的值是祖先元素，而target属性的值是最初触发事件的元素。

在TypeScript中，可以使用以下方式声明事件处理函数来使用currentTarget和target属性：

function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
  console.log(event.currentTarget); // 类型为 HTMLButtonElement
  console.log(event.target); // 类型为 EventTarget
}

在上述示例中，event参数的类型为React.MouseEvent<HTMLButtonElement>，其中HTMLButtonElement表示事件目标元素的类型。因此，使用currentTarget属性时，它的类型为HTMLButtonElement，而使用target属性时，它的类型为EventTarget。

在上述示例中，currentTarget属性和target属性都是React.MouseEvent事件对象的属性。

• currentTarget属性代表事件处理函数所绑定的元素，即当前正在处理事件的元素，它的类型为HTMLButtonElement。在这个例子中，currentTarget的值是button元素，因为事件处理函数被绑定在button元素上。

• target属性代表触发该事件的元素，即最初的事件目标元素，它的类型为EventTarget。在这个例子中，target的值也是button元素，因为点击事件是在button元素上触发的。

需要注意的是，HTMLButtonElement是一个具体的元素类型，它表示一个<button>元素节点。而EventTarget是一个通用的接口类型，它代表可以作为事件目标的任何节点类型。因此，target属性的类型为EventTarget，它比HTMLButtonElement更加宽泛，可以适用于所有类型的事件目标节点。

currentTarget属性 类型为HTMLButtonElement

target属性 类型为EventTarget

React.MouseEvent事件对象的属性