您的位置：首页 > Web前端 > React

React学习笔记（5）--事件

2015-09-30 10:58 501 查看

分类： web前端2015-08-29 08:42 33人阅读评论(0) 收藏举报

1.事件处理函数的使用

组件：

React 自有方法

用户定义方法

事件处理函数可以接受event参数；
如之前用过的：

[html] view plain copy

//监听内容的变化并且记录在状态中

handleChange: function(event){

this.setState({inputText: event.target.value});

},

//添加提交按钮并打印结果

handleSubmit: function () {

console.log("reply To" + this.props.selectName + "\n"

+ "\n" + this.state.inputText);

},

编写完事件后需要绑定事件处理函数
如：

[html] view plain copy

onChange={this.handleChange}

[html] view plain copy

<pre class="html" name="code">onChange={this.handleChange}

事件；
1》触摸类事件：只会在移动设备中产生，对手的移动位置进行检测并做出响应

onTouchCancel:

onTouchEnd

onTouchMove

onTouchStart

2》键盘类事件：

onKeyDown

onKeyUp

onKeyPress

3》剪切类事件

onCopy

onCut

onPaste

4》表单类事件

onChange

onInput

onSubmit

5》焦点类事件

onFocus ：获得焦点

onBlur ：失去焦点

6》UI元素：元素或页面的滚动事件

onScroll

7》滚动事件：监听滚动位置，方向

onWheel

8》鼠标类事件：

onClick

onContextMenu ：右键，上下文菜单

onDoubleClickc

onMouseEnter

onMouseDown

onMouseLeave

onMouseMove

onMouseOut

onMouseOver

onMouseUp

9》鼠标拖拽事件：上传内容

onDrop

onDrag

onDragEnd

onDragEnter

onDragExit

onDragLeave

onDragOver

onDragStart

实例1：

[html] view plain copy

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="build/react.js"></script>

<script src="build/JSXTransformer.js"></script>

</head>

<body>

<script type="text/jsx">

var style = {

color : "red",

border: "1px #000 solid"

};

var HelloWorld = React.createClass({

handleChange: function (event) {

console.log(event.target.value);

},

render: function () {

return <div>

<input onChange={this.handleChange} />

</div>;

},

});

React.render(<div style={style}>

<HelloWorld></HelloWorld>

</div>, document.body);

</script>

</body>

</html>

2 事件对象：

[html] view plain copy

event.target.value

target：事件对象的属性，事件应得DOM元素

事件对象的属性：
1》通用属性

boolean bubbles : 事件是否可以冒泡

boolean cancelable : 事件是否可以取消

DOMEventTarget currentTarget :

boolean defaultPrevented : 事件是否禁止默认行为

number eventPhase : 事件所处的阶段

boolean isTrusted : 事件是否可信，可信事件即用户自定义触发的事件，不可信事件即用js代码触发的事件

DOMEvent nativeEvent 使用原生的浏览器发出的事件对象

void preventDefault() : 禁止默认行为

void stopPropagation() ：禁止冒泡

DOMEventTarget target:

number timeStamp

string type

2》不同事件对象特有的属性

i 剪切事件：

DOMDataTransfer clipboardDate : 得到剪切数据

ii 键盘事件：

boolean altKey ; 是否按下alt键

Number charCode ；按键的编码; 字符编码

boolean ctrlKey ；是否按下ctrl键

function getModifierState(key) ; 是否按下辅助按键ctrl,shift

String key

Number keyCode; 按键编码；非字符

String locale ; 本地化的字符串

Number location ；位置

boolean metaKey; win键

boolean repeat ；按键是否重复

boolean shiftKey；是否按下shift

Number which ; 通用化的charCode和keyCode

iii 焦点

DOMEventTarget relatedTarget : 相关的角度

iv 鼠标事件

boolean altKey；

Number button；

Number buttons；

Number clientX;

Number clientY; 当前鼠标所处的坐标, 顶点是浏览器窗口的左上角

boolean ctrlKey

function getModifierState(key);

boolean metaKey;

Number pageX

Number pageY; 顶点时html页面的左上角

DOMEventTarget relatedTarget ;

Number screenX；

Number scrrenY; p

boolean shiftKey;

v 触摸事件：

boolean altKey

DOMTouchList changedTouchs

boolean ctrlKey

function getModifierState(Key)

boolean metaKey

boolean shiftKey

DOMTouchList targetTouches

DOMTouchList touches

vi UI元素

Number detail ：滚动的距离

DOMAbstractView view ：视图

vii 滚动：

Number deltaMode: 单位

Number deltaX

Number deltaY

Number deltaZ 在坐标轴上对应的位置

实例1

[html] view plain copy

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="build/react.js"></script>

<script src="build/JSXTransformer.js"></script>

</head>

<body>

<script type="text/jsx">

var HelloWorld = React.createClass({

getInitialState: function () {

return{

backgroundColor:'#FFFFFF'

}

},

handleWheel: function (event) {

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 <div onWheel={this.handleWheel} style={this.state}>

<p>Hello World</p>

</div>;

},

});

React.render(

<HelloWorld></HelloWorld>

, document.body);

</script>

</body>

</html>

实例2

[html] view plain copy

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="build/react.js"></script>

<script src="build/JSXTransformer.js"></script>

</head>

<body>

<script type="text/jsx">

var HelloWorld = React.createClass({

getInitialState: function () {

return {

password: ''

}

},

handleKeyPress: function (event) {

this.setState({

password: this.state.password + event.which

});

console.log(this.state)

},

handleChange: function (event) {

event.target.value = '';

},

render: function () {

return <div>

<input onKeyPress={this.handleKeyPress} onChange={this.handleChange}/>

<p style={{'display':this.state.password.indexOf('495051')>=0 ? 'inline'

:'none'

}}>You got it</p>

</div>

},

});

React.render(

<HelloWorld></HelloWorld>

, document.body);

</script>

</body>

</html>

3 事件和状态关联
this.setState()

实例1：

[html] view plain copy

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="build/react.js"></script>

<script src="build/JSXTransformer.js"></script>

</head>

<body>

<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 <div onMouseMove={this.handleMouseMove} style={{

height:'1000px',

width:'700px',

backgroundColor: 'gray'

}}>

{this.state.x + ', ' + this.state.y}

</div>

},

});

React.render(

<HelloWorld></HelloWorld>

, document.body);

</script>

</body>

</html>

视频课程：极客学院

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航