一、事件处理函数的使用
鼠标事件:
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
二、事件对象介绍
实例代码:
<!DOCTYPE html> <html lang="zn-cn"> <head> <Meta charset="UTF-8"> <title>React</title> </head> <body> <script src="./build/react.js"></script> <script src="./build/JSXTransformer.js"></script> <script type="text/jsx"> @H_404_329@var HelloWorld = React.createClass({ getInitialState:@H_404_329@function () { @H_404_329@return { backgroundColor:'#FFFFFF' } },handleWheel:@H_404_329@function () { @H_404_329@var newColor = (parseInt(@H_404_329@this.state.backgroundColor.substr(1),16) + event.deltaY * 997).toString(16); newColor = '#' + newColor.substr(newColor.length - 6).toUpperCase(); @H_404_329@this.setState({ backgroundColor:newColor }); },render:@H_404_329@function () { console.log(@H_404_329@this.state); @H_404_329@return <div onWheel={@H_404_329@this.handleWheel} style={@H_404_329@this.state}> <p>Hello,World</p> </div>; } }); React.render(<HelloWorld/>,document.body); </script> </body> </html>
<!DOCTYPE html> <html lang="zn-cn"> <head> <Meta charset="UTF-8"> <title>React</title> </head> <body> <script src="./build/react.js"></script> <script src="./build/JSXTransformer.js"></script> <script type="text/jsx"> @H_404_329@var HelloWorld = React.createClass({ getInitialState:@H_404_329@function () { @H_404_329@return { password:'' } },handleKeyPress:@H_404_329@function () { @H_404_329@this.setState({ password:@H_404_329@this.state.password + event.which }); console.log(@H_404_329@this.state); },handleChange:@H_404_329@function () { event.target.value = ''; },render:@H_404_329@function () { console.log(@H_404_329@this.state); @H_404_329@return <div> <input onKeyPress={@H_404_329@this.handleKeyPress} onChange={@H_404_329@this.handleChange} /> <p style={{ 'display':@H_404_329@this.state.password.indexOf('495051') >= 0?'inline':'none' }}>You get it!</p> </div>; } }); React.render(<HelloWorld/>,document.body); </script> </body> </html>
三、事件和状态关联
实例如下:
<!DOCTYPE html> <html lang="zn-cn"> <head> <Meta charset="UTF-8"> <title>React</title> </head> <body> <script src="./build/react.js"></script> <script src="./build/JSXTransformer.js"></script> <script type="text/jsx"> @H_404_329@var HelloWorld = React.createClass({ getInitialState:@H_404_329@function () { @H_404_329@return { x:0,y:0 } },handleMouseMove:@H_404_329@function (event) { @H_404_329@this.setState({ x:event.clientX,y:event.clientY }); },render:@H_404_329@function () { @H_404_329@return <div onMouseMove={@H_404_329@this.handleMouseMove} style={{ height:'1000px',width:'700px',backgroundColor:'gray' }}>{@H_404_329@this.state.x + ',' + @H_404_329@this.state.y} </div>; } }); React.render(<HelloWorld/>,document.body); </script> </body> </html>