一 绑定事件处理函数

1.1 鼠标类

  1. onContextMenu
  2. onClick
  3. onDoubleClick
  4. onMouseDown
  5. onMouseUp
  6. onMouseEnter
  7. onMouseLeave
  8. onMouseMove
  9. onMouseOut
  10. onMouseOver

1.2 拖拽事件:

  1. onDrop
  2. onDrag
  3. onDragStart
  4. onDragEnd
  5. onDragEnter
  6. onDragLeave
  7. onDragOver
  8. onDragExit

1.3 触摸

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

  1. onTouchStart
  2. onTouchEnd
  3. onTouchMove
  4. onTouchCancel

1.4 键盘

onKeyPressonKeyDownonKeyUp的组合

  1. onKeyPress
  2. onKeyDown
  3. onKeyUp

1.5 剪切类

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

  1. onCopy
  2. onCut
  3. onPaste

1.6 表单类

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

  1. onChange
  2. onInput
  3. onSubmit

onChange可以用在输入框、单选框、下拉列表里,每当内容发生变化时我们都能获得通知。

onInput使用在文字输入。

onSubmit是用在整个表单的输入提交,常用在禁止表单的默认操作。

1.7 焦点事件

  1. onFocus
  2. onBlur

1.8 UI元素类

  1. onScroll

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

1.9 滚动

  1. onWheel

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

1.10 组成事件

  1. onCompositionEnd
  2. onCompositionStart
  3. onCompositionUpdate

1.11 图片类

  1. onLoad
  2. onError

1.12 多媒体类

  1. onAbort
  2. onCanPlay
  3. onCanPlayThrough
  4. onDurationChange
  5. onEmptied
  6. onEncrypted
  7. onEnded
  8. onError
  9. onLoadedData
  10. onLoadedMetadata
  11. onLoadStart
  12. onPause
  13. onPlay
  14. onPlaying
  15. onProgress
  16. onRateChange
  17. onSeeked
  18. onSeeking
  19. onStalled
  20. onSuspend
  21. onTimeUpdate
  22. onVolumeChange
  23. onWaiting

二 事件池

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

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

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

三 事件对象

事件处理器将会传入SyntheticEvent的实例,一个对浏览器本地事件的跨浏览器封装。它有和浏览器本地事件有相同的属性和方法,包括stopPropagation()preventDefault(),但是没有浏览器兼容问题。

如果因为一些因素,需要底层的浏览器事件对象,只要使用nativeEvent属性就可以获取到它了。

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

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

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

3.1 通用属性

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

  1. bubbles (boolean) 表示事件是否冒泡
  2. cancelable(boolean) 表示事件是否可以取消
  3. currentTarget(DOMEventTarget) 与Target类似,由于事件可以冒泡,所以两者表示的内容是不同的
  4. defaultPrevented(boolean) 表示事件是否禁止了默认行为
  5. eventPhase(number) 表示事件所处的阶段
  6. isTrusted(boolean) 表示事件是否可信。所谓的可信事件表示的是用户操作的事件,不可信事件就是通过JS代码来触发的事件。
  7. nativeEvent(DOMEvent)
  8. preventDefault() (void) 对应的defaultPrevented,表示的是禁止默认行为
  9. stopPropagaTion() (void) 对应的是bubbles,表示的是sh
  10. target(DOMEventTarget)
  11. timeStamp(number) 时间戳,也就是事件触发的事件
  12. type(string) 事件的类型

3.2 不同事件对象的特有属性

3.2.1 剪切事件

  1. clipboardData(DOMDataTransfer)表示拿到的数据

3.2.2 键盘事件

  1. ctrlKey(boolean) 表示是否按下ctrl键
  2. altKey(boolean) 表示是否按下alt键
  3. shiftKey(boolean) 表示是否按下shift
  4. metaKey(boolean) 表示的是win系统下的win键,mac系统下对应的command键
  5. getModifierState(key) (function) 表示是否按下辅助按键(辅助按键就是雷士ctrl、shift等辅助按键)可以传入按键编码来判断是否按下
  6. charCode(Number) 表示的是按键的字符编码,可以通过编码来判断按下的是什么键
  7. key(string) 字符串,按下的键
  8. keyCode(Number) 表示那些不是字符编码的按键
  9. which(Number) 表示经过通用化得charCode和keyCode
  10. locale(String) 表示本地化得一些字符串
  11. location(number) 表示位置
  12. repeat(boolean) 表示按键是否重复

3.2.3 焦点事件

  1. relatedTarget(DOMEventTarget) 相关焦点对象

3.2.4 鼠标事件

  1. ctrlKey(boolean)
  2. altKey(boolean)
  3. shiftKey(boolean)
  4. metaKey(boolean)
  5. getModifierState(key) (function)
  6. button(Number)
  7. buttons(Number)
  8. clientX(Number) 原点为浏览器左上角
  9. clinetY(Number) 原点为浏览器左上角
  10. pageX(Number) 原点为HTML页面的左上角
  11. pageY(Number) 原点为HTML页面的左上角
  12. screenX(Number) 原点为显示器的左上角
  13. screenY(Number) 原点为显示器的左上角
  14. relatedTarget(DOMEventTarget)

3.2.5 触摸事件

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

  1. ctrlKey(boolean)
  2. altKey(boolean)
  3. shiftKey(boolean)
  4. metaKey(boolean)
  5. getModifierState(key)
  6. changedTouches(DOMTouchList) 判断手势操作
  7. targetTouches(DOMTouchList) 判断手势操作
  8. touches(DOMTouchList) 判断手势操作

3.2.6 UI元素事件

  1. detail(Number) 滚动的距离
  2. view(DOMAbstractView) 界面,视窗

3.2.7 鼠标滚动

  1. deltaMode(Number) 可以理解为移动的单位
  2. deltaX(Number) X轴移动的相对距离固定值
  3. deltaY(Number) Y轴移动的相对距离固定值
  4. deltaZ(Number) Z轴移动的相对距离固定值

3.3 实例

3.3.1 滚动事件对象

var HelloDada = React.creatClass({
getInitialState:function(){
return {
backgroundColor:'#FFFFFF'
}
},
handleWheel:function(e){
var newColor = (parseInt(this.state.backgroundColor.substr(1),16)+e.deltaY*997).tiString(16);
this.setState({
backgroundColor:newColor
})
},
render:function(){
return <div onWheel={this.handleWheel} style={this.state}>
<p>Dada Shuaige</p>
</div>
}
});
ReactDOM.render(<HelloDada />,document.body)

3.3.2 2.键盘事件对象

var Dada =React.creatClass{
getInitialState:function(){
return{
password:''
}
},
handleKeyPress:function(e){
this.setState({
paddword:this.state.password+e.which
});
},
handleChange:function(e){
e.target.value='';
},
render:function(){
return <div>
<input onKeyPress={this.handleKeyPress} onChange={this.handleChange} />
<p style={{
'display':this.state.password.indexOf('495051') >=0?'block':'none'
}}>Dada handsomeboy</p>
</div>
}
};
ReactDOM.render(<Dada />,document.body)

四 事件与状态关联

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

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

this.setState设置状态

4.1 实例

var Dada =React.creatClass({
getInitialState:function(){
return{
x:0,
y:0
}
},
handleMouseMove:function(e){
this.setState({
x:e.clientX,
y:e.clientY
});
},
render:function(){
return <div onMouseMove={this.handleMouseMove} style={{
width:'200px',
height:'200px',
backgroundColor:'#999'
}}>
{this.state.x+'.'+this.state.y}
</div>
}
});
ReactDOM.render(<Dada />,document.body)

React 事件总结的更多相关文章

  1. React事件杂记及源码分析

    前提 最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点  调用方法时需要手动绑定this  React事件是一种合成事件SyntheticEvent,什么是合成事件?  事件属性 ...

  2. react事件机制

    1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...

  3. 【React】354- 一文吃透 React 事件机制原理

    大纲 主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解. 当然肯定会存在一些表述不清或者理解不够标准的地方,还请各位大神. ...

  4. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  5. 源码看React 事件机制

    对React熟悉的同学都知道,React中的事件机制并不是原生的那一套,事件没有绑定在原生DOM上,发出的事件也是对原生事件的包装.那么这一切是怎么实现的呢? 事件注册 首先还是看我们熟悉的代码 &l ...

  6. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

  7. React事件属性

    一.简介 二.滚动例子,滚动改变颜色 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta c ...

  8. React事件函数简介

    一.事件汇总 二.例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset= ...

  9. React事件绑定与解绑

    React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...

  10. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

随机推荐

  1. [UWP]使用CompositionAPI的翻转动画

    1. 运行效果 在 使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow) 这篇文章里我介绍了一个包含长阴影的番茄钟,这个番茄钟在状态切换时用到了翻转动画,效 ...

  2. LINQ学习——JOIN

    一.JOIN的作用 1.使用联接来结合两个或更多的集合的数据. 2.联接操作接受两个集合然后创建一个临时的对象集合,每一个对象包含原始集合对象中的所有字段. Note:这里是包含而不是这个原实集合的字 ...

  3. linux No module named yum错误的解决办法

    linux No module named yum错误的解决办法 肯定是yum的版本与当前python的版本不一致造成的 <pre>所以修改yum的配置,修改文件: vim /usr/bi ...

  4. 【集合系列】- 初探java集合框架图

    一.集合类简介 Java集合就像一种容器,可以把多个对象(实际上是对象的引用,但习惯上都称对象)"丢进"该容器中.从Java 5 增加了泛型以后,Java集合可以记住容器中对象的数 ...

  5. libpcap的下载与安装(apt-get安装unable to locate package 的解决方法(Ubantu))

    因为网络安全课的实验课要求,我们得下载libcap我们得做一个类似于tcpdump的一个东西.具体要求就不贴出来了. libpcap只能在官网(www.tcpdump.org)下到,我用的os是Ubu ...

  6. Intellij IDEA搭建JSP+Tomcat开发环境

    1.新建项目 然后填入项目名称和选择项目路径,填完点击完成. 2.添加WEB框架 别问我为什么不一开始就直接新建WEB框架,因为我也是看的别人的教程0.0 不过还遇到了一些新问题,后面会讲到 3.配置 ...

  7. 为什么Python类语法应该不同?

    做过python的人你会发现想要的东西跟它原有的是不同的.Python对我来说是真的是这样.如果可以的话,对于Python中很多的我想要改的东西,我有很多的想法.现在我向您讲述其中一个:类定义的语法. ...

  8. webpack安装与核心概念

    安装webpack webpack核心概念:入口.输出.加载器.插件.模块.模式 一.安装webpack 1.安装webpack之前需要安装nodejs环境,在使用nodejs环境自带的包管理工具np ...

  9. ArcGIS API For Javascript:新增热力图层的方法

    当我们要制作一个热力图层,可以通过以下 3 步来实现: 引入类 在 require 中需引入 "esri/layers/FeatureLayer", "esri/rend ...

  10. 【集合系列】- 深入浅出的分析IdentityHashMap

    一.摘要 在集合系列的第一章,咱们了解到,Map 的实现类有 HashMap.LinkedHashMap.TreeMap.IdentityHashMap.WeakHashMap.Hashtable.P ...