上一篇博客讲了如何在React
使用HTML
属性,这次就是函数,但是此篇博客讲述的事件不完备,其他的希望大家自行学习
@H_502_16@1.概要概念:合成事件(
SyntheticEvent
)是React
事件系统的核心
事件处理程序通过合成事件的实例进行传递,合成事件是浏览器原生事件跨浏览器的封装,SyntheticEvent
和浏览器的原生事件一样有stopPropagation
,preventDefault()
接口,同时这些接口也是跨浏览器的。
如果你因为某些原因想使用浏览器原生的时间,可以使用nativeEvent
属性获取,每一个合成事件对象都有以下属性:
类型 属性名
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type
注意:
在React v0.14
总,事件处理程序返回false
不再停止事件传播,取而代之,应该需要手动触发e.stopPropagation()
或者e.preventDefault()
2.事件池[Event]
SyntheticEvent
是被池化(池化的概念大家可以百度)的,这意味着SyntheticEvent
对象其实是被抽象出来的,它将会被重用并且所有的属性都会在事件回调被调用后被取消掉或者说被释放掉,同时这个对象只会存在一个实例,因此,你不能异步的访问事件,也就是说自始至终你都只有一个对象来使用,何来异步说法。
function onClick(event) {
console.log(event); // => 事件对象[之后会被取消掉或者说无效化]
console.log(event.type); // => "click"
const eventType = event.type; // => "click"
setTimeout(function() {
console.log(event.type); // => null
console.log(eventType); // => "click"
},0);
//clickEvent将会被赋值为null[因为最后被析构掉了]
this.setState({clickEvent: event});
//这里是有用的,因为event.type是基础类型
this.setState({eventType: event.type});
}
这也是为什么我们console.log()
出来的结果中的时间一般都是null
,原因就在这里,所以,如果你为了更好的调试,让事件可以异步处理。
注意
如果你想异步访问事件属性,应该在是处理事件时调用event.persist()
,这会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。
3.支持的事件
React
将事件进行了统一化,这使得事件可以跨浏览器使用
下面的事件处理程序在事件冒泡阶段被触发。如果要注册事件捕获处理程序,应该在事件名字中加入Capture
,例如使用onClickCapture
处理点击事件的捕获阶段,而不是使用onClick
。
Clipboard Events
Composition Events
Keyboard Events
Focus Events
Form Events
Mouse Events
Selection Events
Touch Events
UI Events
Wheel Events
Media Events
Image Events
Animation Events
Transition Events
这些事件接下来要一一讲到了啊,又是一个伟大的工程
剪贴板事件
(Clipboard Events)
事件名称
onCopy onCut onPaste
DOMDataTransfer clipboardData
Composition
事件
好像是用来处理文字的,暂时不明白
事件名称
onCompositionEnd onCompositionStart onCompositionUpdate
string data
键盘事件
(Keyboard Events)
onKeyDown onKeyPress onKeyUp
类型 属性名
boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean MetaKey
boolean repeat
boolean shiftKey
number which
焦点事件
(Focus Events)
事件名称
onFocus onBlur
这里需要注意的是,focus
在React
中所有的DOM上
都有效而不仅仅是表单元素
属性名
DOMEventTarget relatedTarget
表单事件
(Form Events)
事件名称
onChange onInput onSubmit
更多消息可以查看个人博客的表单组件部分
鼠标事件
(Mouse Events)
事件名称
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouSEOut onMouSEOver onMouseUp
其中onMouseEnter
和onMouseLeave
,一个是进入元素触发,一个是离开元素进行触发,不会触发冒泡捕捉,因为他们离开了旧元素必然进入一个新的元素,如此相当于一个冒泡操作了。
boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean MetaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey
选择事件
(Selection Events)
事件名称
onSelect
触控事件
(Touch Events)
事件名称
onTouchCancel onTouchEnd onTouchMove onTouchStart
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean MetaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches
用户界面事件
(UI Events)
事件名称
onScroll
number detail
DOMAbstractView view
滚轮事件
(Wheel Events)
事件名称
onWheel
number deltaMode
number deltaX
number deltaY
number deltaZ
媒体事件
(Media Events)
事件名称
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting
图片事件
(Image Events)
事件名称
onLoad onError
动画事件
(Animation Events)
事件名称
onAnimationStart onAnimationEnd onAnimationIteration
string animationName
string pseudoElement
float elapsedTime
过渡事件
(Transition Events)
事件名称
onTransitionEnd
string propertyName
string pseudoElement
float elapsedTime
啊
React
内容的讲解估计到此为止了,接下来将是React
的一些工具使用了,可能要等一段时间了