React的一些事件系统

 2018年08月04日 分类:React/前端设计  评论(0)  阅读(2489)

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

组件class后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件生命周期中的方法,如:rendercomponentWillUpdatecomponentDidMount等。用户自定义的方法可以起符合JS命名规范的方法就可以(最好使用驼峰命名),如:handleClickhandleChangehandleMouseover等。

事件绑定语法: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

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

键盘

onKeyPressonKeyDownonKeyUp的组合

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

具体的使用和API需要查看相关的API哦。

标签:
wechat_app
微信公众号:webapp_club
关注一下,或许能让你获得更多前端咨询信息。
加载中...
分享中心
各类业务开发,联系QQ:5679361
广告位联系QQ:5679361

评论 抢沙发

评论前必须登录


如果你觉得本站内容对你有所帮助,比如提升你对编程方面的认识,你可以通过上面的二维码请博主喝杯咖啡,安好。

WEB前端开发部落(公众号:webapp_club)

群列表

前端初级学习群:初级Web前端学习群(后期为支付入群)
PHP初级学习群:PHP(MySQL)学习交流群
QQ群仅作为相关领域讨论平台,均提供高质量问题交流,禁止闲聊,无法接受的朋友请勿加群!
进群需要通过这里获取进群码才能进群哦!