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

发布时间：2020-12-15 04:49:26 所属栏目：百科来源：网络整理

导读：1.事件处理函数的使用组件： React 自有方法用户定义方法事件处理函数可以接受event参数；如之前用过的： //监听内容的变化并且记录在状态中 handleChange: function(event){ this.setState({inputText: event.target.value}); },//添加提交按钮并打印结

1.事件处理函数的使用

组件：

React 自有方法
用户定义方法

事件处理函数可以接受event参数；

如之前用过的：

        //监听内容的变化并且记录在状态中
        handleChange: function(event){
            this.setState({inputText: event.target.value});
        },//添加提交按钮并打印结果
        handleSubmit: function () {
            console.log("reply To" + this.props.selectName + "n"
                     + "n" + this.state.inputText);
        },

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

如：

onChange={this.handleChange}

<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：

<!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 事件对象：

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:
numbertimeStamp
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

<!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

<!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>
            },document.body);
    </script>
</body>
</html>

3 事件和状态关联

this.setState()

实例1：

<!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>
            },document.body);
    </script>
</body>
</html>

视频课程：极客学院

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!