事件对象中的event.target.value和event.currentTarget.value之间的区别

Question

我在事件处理程序中像下面这样捕获输入值:

import React from 'react';

export class Newsletter extends React.Component {
    handleClick(event) {
        let newsletterId = event.target.value;
        console.log(newsletterId);
    }

    constructor(props) {
        super(props);
        this.state = {
            newsletter: this.props.newsletter,
        }
    }

    render() {
        return (
            <div className="col-sm-4 col-xs-12">
                 <button onClick={this.handleClick.bind(this)}
                                value={this.state.newsletter.pk}>
                         <span className="fa fa-arrow-right"></span> 
                 </button>
            </div>
        )
    }
}

这段代码表现得很奇怪。有时目标值变成了undefined。有时我获得了正确的newsletterId，而有时却得到undefined。请参见下面的截图：

然后我把event.target.value改为event.currentTarget.value。现在它运行得很顺畅。

所以，问题是，在这种情况下event.target.value和event.currentTarget.value之间有什么区别？

- arshovon

Answer 1

这种奇怪的行为是什么原因造成的？为什么有时我会得到预期的值？

这是因为我点击了位于button元素内部的span元素。有时候，我实际上是在点击span元素，而不是button元素。这些点击事件并未绑定到button元素，而是在span元素上触发了点击事件。这就是这种奇怪行为的原因。

简而言之，

target：实际单击的任何元素。由于可能位于绑定事件的元素内，因此可能会有所不同。

currentTarget：你实际上绑定事件的元素。它永远不会改变。

参考：

1. 目标值有时未定义
2. 事件目标与事件当前目标
3. MDN Event.currentTarget

- arshovon

---

非常好的例子，谢谢。 这里还有一些其他的参考资料，可能会对其他人有所帮助： https://dev59.com/_Wkw5IYBdhLWcg3wKnab 我认为你可以将你的例子添加到这个线程中，这可能会帮助很多人。 - Guilherme Abacherli