react笔记之事件系统

责编:menVScode 2017-07-10 22:42 阅读(711)


doChange(event){
	let {isHeartOn} = this.state;
        console.log(event.nativeEvent);
        console.log(event);
	this.setState({
		isHeartOn:!isHeartOn
	})
}

        事件对象event:这里的事件对象不是原来浏览器提供给我们的那个额对象,react在此基础上又封装了一层。不过想用浏览器原生提供方法,react这里也可以获取的到。可以通过event.nativeEvent来获取:

QQ截图20170710221642

        直接打印event的结果: 这个就是react提供给我们的合成的事件对象,也就是它封装过的事件对象

        QQ截图20170710222245

       打开react官网介绍事件对象(合成对象)的部分:https://facebook.github.io/react/docs/events.html,刚刚打印event内容也可以查看官网的,如下:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault() //阻止事件默认行为
boolean isDefaultPrevented()
void stopPropagation() //阻止冒泡行为
boolean isPropagationStopped()
DOMEventTarget target //通过event.target可以拿到真实的dom节点,用到比较多
number timeStamp
string type

        支持的事件类型,下面介绍的也是从官网搬运过来的,上面已经贴出地址了:

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

        这些事件没必要一一去记,用到的时候直接去官网查就好了。

标签: react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码