正文 

当前位置： 首页 > java > java语法

react.js学习笔记之事件系统

add+      2022-02-10     264

关键词：

事件系统

React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性。

组件createClass后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件生命周期中的方法，如：render、componentWillUpdate、componentDidMount等。用户自定义的方法可以起符合JS命名规范的方法就可以（最好使用驼峰命名），如：handleClick、handleChange、handleMouseover等。

事件绑定语法：onClick = {this.handleClick}

绑定事件处理函数

鼠标类

  • onClick

  • onContextMenu

  • onDoubleClick

  • onMouseDown

  • onMouseEnter

  • onMouseLeave

  • onMouseMove

  • onMouseOut

  • onMouseOver

  • onMouseUp

拖拽事件：

  • onDrop

  • onDrag

  • onDragEnd

  • onDragEnter

  • onDragExit

  • onDragLeave

  • onDragOver

  • onDragStart

触摸

  • onTouchCancel

  • onTouchEnd

  • onTouchMove

  • onTouchStart

触摸只会在移动设备上产生

键盘

onKeyPress是onKeyDown和onKeyUp的组合

  • onKeyDown

  • onKeyPress

  • onKeyUp

剪切类

  • onCopy

  • onCut

  • onPaste

对应的是我们常常使用的复制、剪切和粘贴

表单类

(会专门总结表单类事件，在此仅仅简单列出)

  • onChange

  • onInput

  • onSubmit

onChange可以用在输入框、单选框、下拉列表里，每当内容发生变化时我们都能获得通知。onInput使用在文字输入。onSubmit是用在整个表单的输入提交，常用在禁止表单的默认操作。

焦点事件

  • onFocus

  • onBlur

UI元素类

  • onScroll

滚动事件触发的时候会触发onScroll事件

滚动

  • onWheel

鼠标滚轮触发的事件，监听滚动幅度，滚动方位

组成事件

  • onCompositionEnd

  • onCompositionStart

  • onCompositionUpdate

图片类

  • onLoad

  • onError

多媒体类

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting

实例演示

 1 var HelloDada = React.creatClass({
 2     getInitialState:function(){
 3         return{
 4             name:‘‘
 5         };
 6     },
 7     handleChange:function(e){
 8         this.setState({
 9             name:e.target.value
10         });
11     },
12     render:function(){
13         return <div>
14         <input onChange={this.handleChange} />
15         </div>
16     }
17 });
18 ReactDom.render(<HelloDada/>,document.body);

 

事件池

虚拟事件对象已经被合并。这意味着虚拟事件对象将被重新使用，而该事件回调被调用之后所有的属性将无效。这是出于性能的考虑。因此，您不能以异步的方式访问事件。

 1 function onClick(event) {
 2   console.log(event); // =>无效的对象
 3   console.log(event.type); // => "click"
 4   var eventType = event.type; // => "click"
 5 
 6   setTimeout(function() {
 7     console.log(event.type); // => null
 8     console.log(eventType); // => "click"
 9   }, 0);
10 
11   this.setState({clickEvent: event}); // 不起作用.this.state.clickEvent 将只包含空值.
12   this.setState({eventType: event.type}); // 您依然可以导出事件属性
13 }

 

如果您想以一个异步的方式来访问事件属性，您应该对事件调用event.persist()。这将从事件池中取出合成的事件，并允许该事件的引用，使用户的代码被保留。

事件对象

事件处理器将会传入SyntheticEvent的实例，一个对浏览器本地事件的跨浏览器封装。它有和浏览器本地事件相同的属性和方法，包括stopPropagation()和preventDefault()，但是没有浏览器兼容问题。
如果因为一些因素，需要底层的浏览器事件对象，只要使用nativeEvent属性就可以获取到它了。

对于 v0.14，在事件处理函数中返回 false 将不会阻止事件冒泡。取而代之的是在合适的应用场景下，手动调用e.stopPropagation()或者e.preventDefault()。

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

其中e是事件对象target是事件对象的属性

(以下内容括号内为类型)

通用属性

  • bubbles (boolean) 表示事件是否冒泡

  • cancelable(boolean) 表示事件是否可以取消

  • currentTarget(DOMEventTarget) 与Target类似，由于事件可以冒泡，所以两者表示的内容是不同的

  • defaultPrevented(boolean) 表示事件是否禁止了默认行为

  • eventPhase(number) 表示事件所处的阶段

  • isTrusted(boolean) 表示事件是否可信。所谓的可信事件表示的是用户操作的事件，不可信事件就是通过JS代码来触发的事件。

  • nativeEvent(DOMEvent)

  • preventDefault() (void) 对应的defaultPrevented，表示的是禁止默认行为

  • stopPropagaTion() (void) 对应的是bubbles，表示的是sh

  • target(DOMEventTarget)

  • timeStamp(number) 时间戳，也就是事件触发的事件

  • type(string) 事件的类型

不同事件对象的特有属性

剪切事件

  • clipboardData(DOMDataTransfer)表示拿到的数据

键盘事件

  • altKey(boolean) 表示是否按下alt键

  • charCode(Number) 表示的是按键的字符编码，可以通过编码来判断按下的是什么键

  • ctrlKey(boolean) 表示是否按下ctrl键

  • getModifierState(key) (function) 表示是否按下辅助按键（辅助按键就是雷士ctrl、shift等辅助按键）可以传入按键编码来判断是否按下

  • key(string) 字符串，按下的键

  • keyCode(Number) 表示那些不是字符编码的按键

  • locale(String) 表示本地化得一些字符串

  • location(number) 表示位置

  • metaKey(boolean) 表示的是win系统下的win键，mac系统下对应的command键

  • repeat(boolean) 表示按键是否重复

  • shiftKey(boolean) 表示是否按下shift

  • which(Number) 表示经过通用化得charCode和keyCode

焦点事件

  • relatedTarget(DOMEventTarget) 相关焦点对象

鼠标事件

  • altKey(boolean)

  • button(Number)

  • buttons(Number)

  • clientX(Number) 原点为浏览器左上角

  • clinetY(Number) 原点为浏览器左上角

  • ctrlKey(boolean)

  • getModifierState(key) (function)

  • metaKey(boolean)

  • pageX(Number) 原点为HTML页面的左上角

  • pageY(Number) 原点为HTML页面的左上角

  • relatedTarget(DOMEventTarget)

  • screenX(Number) 原点为显示器的左上角

  • screenY(Number) 原点为显示器的左上角

  • shiftKey(boolean)

触摸事件

为了使触摸事件生效，在渲染所有组件之前调用 React.initializeTouchEvents(true)。

  • altKey(boolean)

  • ctrlKey(boolean)

  • getModifierState(key)

  • metaKey(boolean)

  • shiftKey(boolean)

  • changedTouches(DOMTouchList) 判断手势操作

  • targetTouches(DOMTouchList) 判断手势操作

  • touches(DOMTouchList) 判断手势操作

UI元素事件

  • detail(Number) 滚动的距离

  • view(DOMAbstractView) 界面，视窗

鼠标滚动

  • deltaMode(Number) 可以理解为移动的单位

  • deltaX(Number) X轴移动的相对距离固定值

  • deltaY(Number) Y轴移动的相对距离固定值

  • deltaZ(Number) Z轴移动的相对距离固定值

实例

  1. 滚动事件对象

 1 var HelloDada = React.creatClass({
 2     getInitialState:function(){
 3         return {
 4             backgroundColor:‘#FFFFFF‘
 5         }
 6     },
 7     handleWheel:function(e){
 8         var newColor = (parseInt(this.state.backgroundColor.substr(1),16)+e.deltaY*997).tiString(16);
 9         this.setState({
10             backgroundColor:newColor
11         })
12     },
13     render:function(){
14         return <div onWheel={this.handleWheel} style={this.state}>
15         <p>Dada Shuaige</p>
16         </div>
17     }
18 });
19 ReactDOM.render(<HelloDada />,document.body)

　　2.键盘事件对象

 1 var Dada =React.creatClass{
 2     getInitialState:function(){
 3         return{
 4             password:‘‘
 5         }
 6     },
 7     handleKeyPress:function(e){
 8         this.setState({
 9             paddword:this.state.password+e.which
10         });
11     },
12     handleChange:function(e){
13         e.target.value=‘‘;
14     },
15     render:function(){
16         return <div>
17         <input onKeyPress={this.handleKeyPress} onChange={this.handleChange} />
18         <p style={{
19             ‘display‘:this.state.password.indexOf(‘495051‘) >=0?‘block‘:‘none‘
20         }}>Dada handsomeboy</p>
21         </div>
22     }
23 };
24 ReactDOM.render(<Dada />,document.body)

 



事件与状态关联

状态不仅仅实现了组件内部结果的清晰对应，还实现了组件与用户之间的交互，使用户与组件的行为紧紧结合起来

handleChange:function(e){
    this.setState({Dada:e.target.value});
}

this.setState设置状态

实例

  
 1 var Dada =React.creatClass({
 2     getInitialState:function(){
 3         return{
 4             x:0,
 5             y:0
 6         }
 7     },
 8     handleMouseMove:function(e){
 9         this.setState({
10             x:e.clientX,
11             y:e.clientY
12         });
13     },
14     render:function(){
15         return <div onMouseMove={this.handleMouseMove} style={{
16             width:‘200px‘,
17             height:‘200px‘,
18             backgroundColor:‘#999‘
19         }}>
20         {this.state.x+‘.‘+this.state.y}
21         </div>
22     }
23 });
24 ReactDOM.render(<Dada />,document.body)

 

js学习笔记9之event事件及其他事件

-->鼠标事件-->event事件对象-->默认事件-->键盘事件（keyCode）-->拖拽效果 一、鼠标事件onclick---------------鼠标点击事件oncontextmenu------鼠标右键点击onmouseover--------鼠标移上onmouseout---------鼠标移出onmousedown-------鼠标按... 查看详情

js高级程序设计学习笔记之js事件

事件流冒泡定义：事件开始时由最具体的元素接收，然后逐级上传到较为不具体的节点。（IE9、FF、Chrome、Safari会将事件一直冒泡到window对象。IE5.5及其以下会跳过<html>元素，直接从body跳到document）。若发生事件的节点元素... 查看详情

react学习笔记

参考http://www.ruanyifeng.com/blog/2015/03/react.html，阮一峰日志 https://reactjs.org/docs/introducing-jsx.html起源于Facebook。Js中MVC框架react独有的JSX语，凡是使用JSX的地方，都要加上type=”text/babel”。核心库为react.js，react-dom.js是 查看详情

easyui学习笔记之tab组件的鼠标事件

一、鼠标经过组件后的事件，自动打开选项卡内容vartabs=$(‘#tt‘).tabs().tabs(‘tabs‘); for(vari=0;i<tabs.length;i++){ tabs[i].panel(‘options‘).tab.unbind().bind(‘mouseenter‘,{index:i},function(e){ $(‘#tt‘).tabs(‘select‘,e 查看详情

《深入浅出wpf》学习笔记之深入浅出话事件

WPF的事件为路由事件，路由的环境为UI组件树（VisualTree），VisualTree由控件和控件的组成元素组成，事件可以在控件内部传递并处理。另一个树为LogicalTree，只包含布局控件和其他控件而不包括控件的组成元素。因此路由事件沿着... 查看详情

#yyds干货盘点react笔记之学习之事件

...一定很酷微信公众号前端小歌谣关注公众号带你进入前端学习交流群react事件案例代码constApp=()=>constclickHandler=(event)=>event.preventDefault();//取消默认行为event.stopPropagation();//取消事件的冒泡alert(我是App中的clickHandler！);/**在React... 查看详情

react+redux学习笔记：react+redux简易开发步骤

...据和业务逻辑，支持所有ReduxAPI，参考之前的文章：Redux学习笔记：Redux简易开发步骤而React+Redux是以上两部分结合起来，方便在React中使用Redux，专用库为React-Redux.js。React-Redux.js新增了一些新方法： 查看详情

ros学习笔记之——esvo复现及davis346测试(代码片段)

之前博客《学习笔记之——EventCamera调研》已经介绍过事件相机。本博文对科大开源的ESVO以及本团队购买的DAVIS346进行测试分析。本博文仅供本人学习记录用，不做任何商业用途～目录原理学习代码运行事件相机的driver安... 查看详情

react.js学习知识小结

学习React也有半个月了吧，这里对所学的基础知识做个简单的总结。自己先是跟着官方文档学，差不多学了四五天，也跟着入门教程做了一个简单的小栗子。然后跟着阮一峰老师的教程上手了几个小Demo，后来在网上发现了一本很... 查看详情

armv8datasheet学习笔记4：aarch64系统级体系结构之generictimer

1.前言2.generatetimer2.1概述提供了一个系统计数器，用来实时测量流逝的时间；提供了一个虚拟计数器，用来测量某个虚拟机上流逝的虚拟时间；定时器，每隔一段时间会触发事件，支持正向计时和倒计时；通用timer实现必须包含... 查看详情

android：安卓学习笔记之androidview的基础知识和冲突事件处理(代码片段)

AndroidView的简单理解和使用AndroidView1、View的基础知识1.1什么是View1.2View的位置参数1.3MotionEvent和TouchSlop1.3.1.MotionEvent1.3.2.TouchSlop1.4VelocityTracker、GestureDetector和Scroller1.4.1VelocityTracker:速度追踪1.4.2GestureD 查看详情

八lwip学习笔记之用户编程接口

一、定时事件1、定时结构2、定时链表3、内核进程4、处理定时事件二、消息机制1、消息结构2、数据包消息3、协议栈API实现4、API消息三、协议栈接口1、用户数据缓存netbuf2、数据缓存操作3、连接结构netconn4、内核回调接口5、协... 查看详情

学习笔记js之事件（上）(代码片段)

前言本篇文章是我的读书笔记，这里我直接从事件开始的原因是我之前没有写博客，最近一段时间才开始。之前的JS笔记也都有写，如果有人想看，欢迎留言/私信，我会把之前的整理出来。文章目录事件流1.事... 查看详情

鸿蒙学习笔记之点击事件(代码片段)

Tips：在上一篇中，分享了如何页面跳转。今天就继续详细讲讲点击事件，明天会继续分享双击事件和长按事件 1.点击事件在HarmonyOS中有四种点击事件，接下来我们分别介绍一下四种点击事件，以及如何实现1.... 查看详情

《android开发艺术探索》之view的事件体系和工作原理学习笔记

书中把自定义View分为下面4类：1、继承View重写onDraw方法这种方法主要用于实现一些不规则的效果，不方便通过布局的组合方式来达到，一般需要自己绘制图形并实现动画等效果。需要重写onDraw方法。采用该方法需要... 查看详情

ros学习笔记之——px4生态系统

之前博客已经初步学习了PX4《ROS学习笔记之——PX4开发初入门》，本博文进一步的学习PX4的相关知识，部分资料来源于购买的阿木实验室的课程《PX4智能无人机二次开发》与《Prometheus自主无人机二次开发课程》目录 PX4... 查看详情

mybatis系统性详解（学习笔记）(代码片段)

目录mybatis知识传统JDBC不足mybatis基础mybatis核心应用配置与原理解析mybatis核心概念整体认识mybatis源码包mybatis基本流程类调用mybatis流程记录mybatis处理流程图mybatis*之sessionmybatis之mappermybatis之sqlmybatis之executormybatis之Cache一级缓存二... 查看详情

unity3d之legacy动画系统学习笔记

...ity4.0以前使用的动画系统，我认为还是很有必要去了解和学习的，所以就有了这篇笔记。Legacy动画系统http://docs.uni 查看详情