一，總結
1，React通過onXxx屬性指定事件處理函數
- React通過自定義（合成）事件，而不是使用原生DOM事件，目的為了更好的兼容性，適用于IE9及以上
- React中的事件是通過事件委托方式（冒泡）處理的（委托給組件最外層的元素）
2，通過event.target得到發生事件的DOM元素對象
二，show1函數中接到的event是React封裝的事件對象，這個event擁有和原生event同樣的屬性。
但原生的事件對象效率低，把所有屬性都掛載到對象上，封裝好的event對象是屬性都準備好了，但沒有值。
<body>
<div id="test"></div>
<script type="text/babel">
class Demo extends React.Component {
render(){
return (
<div onClick={this.show}>
<button onClick={this.show1}>按鈕1</button>
<button onClick={this.show2}>按鈕2</button>
<div onClick={this.show3}>xxx</div>
</div>
)
}
show(){
console.log('觸發外層點擊事件')
}
show1(event){
// 阻止事件冒泡
event.stopPropagation()
// 接到的event是React封裝的事件對象，這個event擁有和原生event同樣的屬性
console.log('按鈕1', event)
}
show2(){
console.log('按鈕2')
}
show3(){
console.log('按鈕3')
}
}
ReactDOM.render(<Demo />, document.getElementById('test'))
</script>
</body>
三，js中的自定義事件
1，js中原生事件
js自動將事件對象傳入，根據情況用的話，在函數的形參中接下event，event就是發生事件的事件對象
<body>
<button id="btn">點擊</button>
<script>
const btn = document.getElementById('btn')
btn.addEventListener('click', (event)=>{
console.log('你點我了')
console.log(event)
})
</script>
</body>
2，js中自定義事件
<body>
<button id="btn2">自定義haha點擊事件</button>
<script>
const btn2 = document.getElementById('btn2')
// 1，創建haha事件
const haha = new Event('haha')
// 2，給btn2綁定haha事件
btn2.addEventListener('haha', ()=>{
console.log('觸發haha事件')
})
// 3，觸發haha事件
btn2.dispatchEvent(haha)
</script>
</body>
浙公網安備 33010602011771號