React 事件总结
一 绑定事件处理函数
1.1 鼠标类
- onContextMenu
- onClick
- onDoubleClick
- onMouseDown
- onMouseUp
- onMouseEnter
- onMouseLeave
- onMouseMove
- onMouseOut
- onMouseOver
1.2 拖拽事件:
- onDrop
- onDrag
- onDragStart
- onDragEnd
- onDragEnter
- onDragLeave
- onDragOver
- onDragExit
1.3 触摸
触摸只会在移动设备上产生
- onTouchStart
- onTouchEnd
- onTouchMove
- onTouchCancel
1.4 键盘
onKeyPress
是onKeyDown
和onKeyUp
的组合
- onKeyPress
- onKeyDown
- onKeyUp
1.5 剪切类
对应的是我们常常使用的复制、剪切和粘贴
- onCopy
- onCut
- onPaste
1.6 表单类
(会专门总结表单类事件,在此仅仅简单列出)
- onChange
- onInput
- onSubmit
onChange可以用在输入框、单选框、下拉列表里,每当内容发生变化时我们都能获得通知。
onInput使用在文字输入。
onSubmit是用在整个表单的输入提交,常用在禁止表单的默认操作。
1.7 焦点事件
- onFocus
- onBlur
1.8 UI元素类
- onScroll
滚动事件触发的时候会触发onScroll事件
1.9 滚动
- onWheel
鼠标滚轮触发的事件,监听滚动幅度,滚动方位
1.10 组成事件
- onCompositionEnd
- onCompositionStart
- onCompositionUpdate
1.11 图片类
- onLoad
- onError
1.12 多媒体类
- onAbort
- onCanPlay
- onCanPlayThrough
- onDurationChange
- onEmptied
- onEncrypted
- onEnded
- onError
- onLoadedData
- onLoadedMetadata
- onLoadStart
- onPause
- onPlay
- onPlaying
- onProgress
- onRateChange
- onSeeked
- onSeeking
- onStalled
- onSuspend
- onTimeUpdate
- onVolumeChange
- 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 通用属性
(以下内容括号内为类型
)
- 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) 事件的类型
3.2 不同事件对象的特有属性
3.2.1 剪切事件
- clipboardData(DOMDataTransfer)表示拿到的数据
3.2.2 键盘事件
- ctrlKey(boolean) 表示是否按下ctrl键
- altKey(boolean) 表示是否按下alt键
- shiftKey(boolean) 表示是否按下shift
- metaKey(boolean) 表示的是win系统下的win键,mac系统下对应的command键
- getModifierState(key) (function) 表示是否按下辅助按键(辅助按键就是雷士ctrl、shift等辅助按键)可以传入按键编码来判断是否按下
- charCode(Number) 表示的是按键的字符编码,可以通过编码来判断按下的是什么键
- key(string) 字符串,按下的键
- keyCode(Number) 表示那些不是字符编码的按键
- which(Number) 表示经过通用化得charCode和keyCode
- locale(String) 表示本地化得一些字符串
- location(number) 表示位置
- repeat(boolean) 表示按键是否重复
3.2.3 焦点事件
- relatedTarget(DOMEventTarget) 相关焦点对象
3.2.4 鼠标事件
- ctrlKey(boolean)
- altKey(boolean)
- shiftKey(boolean)
- metaKey(boolean)
- getModifierState(key) (function)
- button(Number)
- buttons(Number)
- clientX(Number) 原点为浏览器左上角
- clinetY(Number) 原点为浏览器左上角
- pageX(Number) 原点为HTML页面的左上角
- pageY(Number) 原点为HTML页面的左上角
- screenX(Number) 原点为显示器的左上角
- screenY(Number) 原点为显示器的左上角
- relatedTarget(DOMEventTarget)
3.2.5 触摸事件
为了使触摸事件生效,在渲染所有组件之前调用 React.initializeTouchEvents(true)
。
- ctrlKey(boolean)
- altKey(boolean)
- shiftKey(boolean)
- metaKey(boolean)
- getModifierState(key)
- changedTouches(DOMTouchList) 判断手势操作
- targetTouches(DOMTouchList) 判断手势操作
- touches(DOMTouchList) 判断手势操作
3.2.6 UI元素事件
- detail(Number) 滚动的距离
- view(DOMAbstractView) 界面,视窗
3.2.7 鼠标滚动
- deltaMode(Number) 可以理解为移动的单位
- deltaX(Number) X轴移动的相对距离固定值
- deltaY(Number) Y轴移动的相对距离固定值
- 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 事件总结的更多相关文章
- React事件杂记及源码分析
前提 最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点 调用方法时需要手动绑定this React事件是一种合成事件SyntheticEvent,什么是合成事件? 事件属性 ...
- react事件机制
1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...
- 【React】354- 一文吃透 React 事件机制原理
大纲 主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解. 当然肯定会存在一些表述不清或者理解不够标准的地方,还请各位大神. ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 源码看React 事件机制
对React熟悉的同学都知道,React中的事件机制并不是原生的那一套,事件没有绑定在原生DOM上,发出的事件也是对原生事件的包装.那么这一切是怎么实现的呢? 事件注册 首先还是看我们熟悉的代码 &l ...
- React事件绑定的几种方式对比
React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...
- React事件属性
一.简介 二.滚动例子,滚动改变颜色 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta c ...
- React事件函数简介
一.事件汇总 二.例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset= ...
- React事件绑定与解绑
React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...
- react 入坑笔记(四) - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
随机推荐
- 基于 ThinkPHP5 + Bootstrap 的后台开发框架 FastAdmin
FastAdmin是一款基于 ThinkPHP5 + Bootstrap 的极速后台开发框架. 主要特性 基于Auth验证的权限管理系统 支持无限级父子级权限继承,父级的管理员可任意增删改子级管理员及 ...
- PHP yaf显示错误提示
PHP yaf显示错误提示 1就是配置文件的那个错误 <pre>error_reporting(E_ALL);</pre> 2init.php文件的<pre>fun ...
- Python 基础 装饰器
今天把学过的装饰器的知识进行回顾一下,说到装饰器,第一反应就是这个东西呢就是用来装逼的,为啥这样说呢,是应为没有这个东西照样可以干活,大部分工作都是可以做的,不管咋样还是把学过的装逼器梳理一下吧. 一 ...
- nodejs+nginx+mongdb+redis安装学习笔记(之nodejs安装)
基础环境 本文安装示例使用ubuntu-14.10-server 64位 操作系统,并没有在其他系统中测试 第一步:安装Nodejs 1.通过apt-get install 安装 (1)下载安装deb ...
- Python3.7.1学习(六)RabbitMQ在Windows环境下的安装
Windows下安装RabbitMQ 环境配置 部署环境 部署环境:windows server 2008 r2 enterprise(本文安装环境Win7) 官方安装部署文档:http://www. ...
- ZeroC ICE中的对象模型和概念
Ice对象的模型和概念. Ice Object并非是我们的接口实现类的实例对象.我们的接口实现类的实例对象只是充当Ice Object的Servant的角色.一个Ice Object可以有众多Serv ...
- .NET资源泄露与处理方案
.NET虽然拥有强大易用的垃圾回收机制,但并不是因为这样,你就可以对资源管理放任不管,其实在稍不注意的时候,可能就造成了资源泄露,甚至因此导致系统崩溃,到那时再来排查问题就已经是困难重重. 一.知识点 ...
- Charles 笔记
一. Charles工作原理 本质就是一个http抓包分析工具,在工作的时候将charles设置成代理服务器,所有网络请求都会经过Charles,这样就实现了网络封包的截取和分析. 主要功能 截取ht ...
- linux后台运行程序--nobup
用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 描述:nohup 命令运行由 Command 参数和任何相关的 Arg 参数指定的命令,忽略所有挂断 ...
- Spring中常见的设计模式——原型模式
1.原型模式应用场景 当遇到大量耗费劳动力的 get,set赋值场景时,如下: public class SetGetParam { public void setParam(UserDto user ...