~~~ 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 } ~~~