~~~ clickHandler3 = (event) => { event.preventDefault() // 阻止默认行为 event.stopPropagation() // 阻止冒泡 console.log('target', event.target) // 指向当前元素，即当前元素触发 console.log('current target', event.currentTarget) // 指向当前元素，假象！！！ // 注意，event 其实是 React 封装的。 // 可以看 __proto__.constructor 是 SyntheticEvent 组合事件 console.log('event', event) // 不是原生的 Event ，原生的 MouseEvent console.log('event.__proto__.constructor', event.__proto__.constructor) // 原生 event 如下。其 __proto__.constructor 是 MouseEvent console.log('nativeEvent', event.nativeEvent) // 指向当前元素，即当前元素触发 console.log('nativeEvent target', event.nativeEvent.target) // 指向 document ！！！ console.log('nativeEvent current target', event.nativeEvent.currentTarget) // 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力 // 2. event.nativeEvent 是原生事件对象 // 3. 所有的事件，都被挂载到 document 上 // 4. 和 DOM 事件不一样，和 Vue 事件也不一样 } ~~~  ~~~ return <ul>{this.state.list.map((item, index) => { return <li key={item.id} onClick={this.clickHandler4.bind(this, item.id, item.title)}> index {index}; title {item.title} </li> })}</ul> ~~~ ~~~ // 传递参数 clickHandler4(id, title, event) { console.log(id, title) console.log('event', event) // 最后追加一个参数，即可接收 event } ~~~