合成事件

现象

class On extends Component {
	constructor(props){
        super(props)
        this.changeName = this.changeName.bind(this) 
    }
    render(){
        return (
            <div onClick={this.handleClick}></div>
        )
    }
    handleClick(e){
        console.log(e.target) // 1、div dom 元素
        // 2、currentTarget：绑定此触发事件的元素，结果：div dom 元素。 但是其实是假象，封装时候指向了
        console.log(e.currentTarget) 
        // 3、nativeEvent：原生事件，结果：mouseEvent
        console.log(e.nativeEvent)
        console.log(e.nativeEvent.currentTarget) // 4、document
    }
}

过程

优点

1. 更好的兼容性和跨平台
2. 挂到 document，减少内存消耗，避免频繁解绑
3. 方便事件的统一管理（如事务机制）