---
# System prepended metadata

title: React Event
tags: [Javascript, React]

---

# 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


