事件对象介绍

最新推荐文章于 2023-10-08 08:41:13 发布

百奇

最新推荐文章于 2023-10-08 08:41:13 发布

阅读量439

点赞数

分类专栏：项目 ReactJs

本文链接：https://blog.csdn.net/qq_43264596/article/details/84668401

版权

ReactJs 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

项目

15 篇文章 0 订阅

订阅专栏

事件对象使用方法

handleChange:function(event){
	console.log(event.target.value);
}

event：即为事件对象
target：事件对应的DOM元素
event.target：事件对象的属性

不同事件对象介绍
1、通用（所有的事件对象都有的属性）：
boolean bubbles(事件是否可以冒泡)
bollean cancelable（事件是否可以取消）
DOMEventTarget currentTarget（由于事件可以冒泡所以跟target表示的是不同的当前的DOM对象）
boolean defaultPrevented （事件是否禁止默认行为）
number eventPhase（事件所处的阶段）
boolean isTrusted（事件是否可信任由用户触发的事件而用代码触发的事件是不可信任的）
DOMEvent nativeEvent（原生的浏览器发生的事件）
void preventDefault（调用这个属性的时候就会禁止默认行文）
void stopPropagation（调用这个会禁止事件冒泡）
DOMEventTarget target（DOM对象）
number timeStamp
string type（事件类型）
2、不同事件也有的属性
2.1、剪切事件 DOMDataTransfer clipboardData
2.2、键盘事件
boolean altKey（是否按下Alt键）
Number charCode（字符编码，通过字符编码来判断按下的是什么键）
boolean ctrlKey（是否按下Ctrl键）
function getModifierState(key) （是否按下了辅助按键）
String key （按下的键）
Number keyCode （除了对应字符的按键）
String locale（本地化的字符串）
Number location（位置）
boolean metaKey（Windows下的win键）
boolean repeat（按键是否重复）
boolean shiftKey （是否按下shift键）
Number which（经过通用化的charCode和keyCode）
3、焦点事件 DOMEventTarget relatedTarget （比如有AB两个输入框当A失去焦点的时候焦点会在B上那么A的relatesTarget就是B）
4、鼠标事件
boolean altKey
Number button
Number buttons
Number clientX（当前鼠标所处的坐标他的顶点是浏览器窗口的左上角（0,0））
Number clientY
boolean ctrlKey
function getModeifierState(key)
boolean metaKey
Number pageX（原点是HTML页面的左上角）
Number pageY
DOMEventTarget relatedTarget
Number screenX（原点是整个显示器的左上角）
Number screenY
boolean shiftKey
5、触摸事件
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
function getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchLIst targetTouches
DOMTounchList touches
6、UI元素
Number detail (距离）
DOMAbstractView view
7、鼠标滚轮的滚动
Number deltaMode（一种单位）
Number DeltaX
Number DeltaY
Number DeltaZ

实例
1使用滚动事件对象
滚动滚轮改变颜色：当鼠标移动到Hello，World这个字上面并且滚动滚轮的时候 div的背景颜色会发生变化

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>使用滚动事件改变颜色</title>
</head>

<body>
    <script src="../jquery-3.3.1.js"></script>
    <script src="../react.js"></script>
    <script src="../react-dom.js"></script>
    <script src="../JSXTransformer.js"></script>
    <script type="text/jsx">
        var HellWorld = React.createClass({
            getInitialState:function(){
                return {
                    backgroundColor:'#FFFFFF',
                }
            },
            handleWheel:function (event) {
                //this.state.backgroundColor.substr(1)这句代码的意思是从第一位之后开始截取 因为背景颜色是一个字符串第一位值是#号不能改变
                var newColor = (parseInt(this.state.backgroundColor.substr(1),16)+event.deltaY* 997).toString(16);
                //newColor.substr(newColor.length - 6)这句代码的意思是 上一句的运算结果可能会超出六位数字 这时就截取六位即可  然后toUpperCase()转换成大写
                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>
            }
        });
        ReactDOM.render(<HellWorld/>,document.body);
</script>
</body>

</html>

2、使用键盘事件对象
效果：监听用户的输入，如果用户输入了我们事先设置好的字符串就会显示YouGotIT

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>使用滚动事件改变颜色</title>
</head>

<body>
    <script src="../jquery-3.3.1.js"></script>
    <script src="../react.js"></script>
    <script src="../react-dom.js"></script>
    <script src="../JSXTransformer.js"></script>
    <script type="text/jsx">
        var HellWorld = React.createClass({
            getInitialState:function(){
                return {
                    backgroundColor:'#FFFFFF',
                }
            },
            handleWheel:function (event) {
                //this.state.backgroundColor.substr(1)这句代码的意思是从第一位之后开始截取 因为背景颜色是一个字符串第一位值是#号不能改变
                var newColor = (parseInt(this.state.backgroundColor.substr(1),16)+event.deltaY* 997).toString(16);
                //newColor.substr(newColor.length - 6)这句代码的意思是 上一句的运算结果可能会超出六位数字 这时就截取六位即可  然后toUpperCase()转换成大写
                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>
            }
        });
        var HelloWorld2 = 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={{
                    //这里495051代表的是123这个输入   不同的输入所对应的字符串不同
                        'display':this.state.password.indexOf('495051')>=0?'inLine':'none'
                    }}>You Got It!</p>
                </div>
            }
        });
        ReactDOM.render(<HelloWorld2/>,document.body);
</script>
</body>

</html>