# React Event
###### tags: `React` `Javascript`
Javascript 基本三種綁定事件方式
constant var = document.getElementById('');
1. var.addListener('click',function(){});
2. var.onclick = ()=>{}
3. <_button onclick=""/>

在React中推薦第三種用法但是要注意React中事件關鍵字為camel case => onClick、onBlur....

<script type="text/babel">
class Demo extends React.Component {
constructor(){
this.demo = this.demo.bind(this);//解決方式
}

render(){
return (
<input onClick={this.demo2}/>
<button onClick={this.demo}/>//注意:如果給的是{demo()}這樣代表呼叫該方法並且替換程回傳值
)
}
}

function demo(){
console.log(this)
}

function demo(event){
console.log(event.target.value)//react在呼叫回調函數時會傳入發生事件對象的DOM
}

</script>

注意 onClick={this.demo} 這個操作是將Demo原型物件中的function參考綁並到button上，因此並不是由實例對象觸發，其中的this將會是undefined

1. 通過onXXX屬性指定事件處理函數(注意大小寫)
- React使用的是自定義函數而不是原生DOM事件=> 為了更好的兼融性
- React中的事件是通過事件委託方式處理(委託給組件最外層的元素) => 為了性能
2. 通過event.target取得"發生事件|的dom元素=>不要過度的使用refs