核心提示：一、事件处理函数的使用鼠标事件：onClickonContextMenuonDoubleClickonMouseDownonMouseEnteronMouseLeaveonMouseMoveonMou...
一、事件处理函数的使用
鼠标事件：
onClick
onContextMenu
onDoubleClick
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onDrop
onDrag
onDragEnd
onDragEnter
onDragExit
onDragLeave
onDragOver
onDragStart
触摸事件：
onTouchCancel
onTouchEnd
onTouchMove
onTouchStart
键盘事件：
onKeyDown
onKeyPress
onKeyUp
剪切事件：
onCopy
onCut
onPaste
表单事件：
onChange
onInput
onSubmit
焦点事件：
onFocus
onBlur
UI事件:
onScroll
滚动事件：
onWheel
二、事件对象介绍
实例代码：
html>
<html lang="zn-cn">
<head>
<meta charset="UTF-8">
<title>Reacttitle>
head>
<body>
<script src="./build/react.js">script>
<script src="./build/JSXTransformer.js">script>
<script type="text/jsx">
var HelloWorld = React.createClass({
getInitialState:function () {
return {
backgroundColor:'#FFFFFF'
}
},
handleWheel:function () {
var newColor = (parseInt(this.state.backgroundColor.substr(1),16) +
event.deltaY * 997).toString(16);
newColor = '#' + newColor.substr(newColor.length - 6).toUpperCase();
this.setState({
backgroundColor:newColor
});
},
render:function () {
console.log(this.state);
return <p onWheel={this.handleWheel} style={this.state}>
<p>Hello,Worldp>
p>;
}
});
React.render(<HelloWorld/>,document.body);
script>
body>
html>
html>
<html lang="zn-cn">
<head>
<meta charset="UTF-8">
<title>Reacttitle>
head>
<body>
<script src="./build/react.js">script>
<script src="./build/JSXTransformer.js">script>
<script type="text/jsx">
var HelloWorld = React.createClass({
getInitialState:function () {
return {
password:''
}
},
handleKeyPress:function () {
this.setState({
password:this.state.password + event.which
});
console.log(this.state);
},
handleChange:function () {
event.target.value = '';
},
render:function () {
console.log(this.state);
return <p>
<input onKeyPress={this.handleKeyPress} onChange={this.handleChange} />
<p style={{
'display':this.state.password.indexOf('495051') >= 0?'inline':'none'
}}>You get it!p>
p>;
}
});
React.render(<HelloWorld/>,document.body);
script>
body>
html>
三、事件和状态关联
实例如下：
html>
<html lang="zn-cn">
<head>
<meta charset="UTF-8">
<title>Reacttitle>
head>
<body>
<script src="./build/react.js">script>
<script src="./build/JSXTransformer.js">script>
<script type="text/jsx">
var HelloWorld = React.createClass({
getInitialState:function () {
return {
x:0,
y:0
}
},
handleMouseMove:function (event) {
this.setState({
x:event.clientX,
y:event.clientY
});
},
render:function () {
return <p onMouseMove={this.handleMouseMove}
style={{
height:'1000px',
width:'700px',
backgroundColor:'gray'
}}>{this.state.x + ', ' + this.state.y}
p>;
}
});
React.render(<HelloWorld/>,document.body);
script>
body>
html>
