react.js 从零开始(五)React 中事件的用法

事件系统

虚拟事件对象

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

如果因为一些因素,需要底层的浏览器事件对象,只要使用 nativeEvent 属性就可以获取到它了。每一个虚拟事件对象都有下列的属性:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() void stopPropagation() DOMEventTarget target number timeStamp string type 

注意:

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

支持的事件

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

如下的事件处理器在事件冒泡阶段触发。要在捕获阶段触发某个事件处理器,在事件名字后面追加 Capture 字符串;例如,使用 onClickCapture 而不是 onClick 来在捕获阶段处理点击事件。

剪贴板事件

事件名:

onCopy onCut onPaste

属性:

DOMDataTransfer clipboardData

键盘事件:

事件名:

onKeyDown onKeyPress onKeyUp

属性:

boolean altKey
Number charCode
boolean ctrlKey function getModifierState(key) String key Number keyCode String locale Number location boolean metaKey boolean repeat boolean shiftKey Number which 

焦点事件

事件名:

onFocus onBlur

属性:

DOMEventTarget relatedTarget

表单事件

事件名:

onChange onInput onSubmit

鼠标事件

事件名:

onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

属性:

boolean altKey
Number button
Number buttons Number clientX Number clientY boolean ctrlKey function getModifierState(key) boolean metaKey Number pageX Number pageY DOMEventTarget relatedTarget Number screenX Number screenY boolean shiftKey 

触摸事件

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

事件名:

onTouchCancel onTouchEnd onTouchMove onTouchStart

属性:

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey function getModifierState(key) boolean metaKey boolean shiftKey DOMTouchList targetTouches DOMTouchList touches 

UI 事件

事件名:

onScroll

属性:

Number detail
DOMAbstractView view

鼠标滚轮滚动事件

事件名:

onWheel

属性:

Number deltaMode
Number deltaX
Number deltaY Number deltaZ


与 DOM 的差异

React 为了性能和跨浏览器的原因,实现了一个独立于浏览器的事件和 DOM 系统。利用此功能,可以屏蔽掉一些浏览器的 DOM 的粗糙实现。

  • 所有 DOM 的 properties 和 attributes (包括事件处理器)应该都是驼峰命名的,以便和标准的 JavaScript 风格保持一致。我们故意和规范不同,因为规范本身就不一致。然而data-* 和 aria-* ,应该仅是小写的。
  • style 属性接收一个带有驼峰命名风格的 JavaScript 对象,而不是一个 CSS 字符串。这与 DOM 中的 style 的 JavaScript 属性保持一致,更加有效,并且弥补了 XSS 安全漏洞。
  • 所有的事件对象和 W3C 规范保持一致,并且所有的事件(包括提交事件)冒泡都正确地遵循 W3C 规范。参考事件系统获取更多详细信息。
  • onChange 事件表现得和你想要的一样:当表单字段改变了,该事件就被触发,而不是等到失去焦点的时候。我们故意和现有的浏览器表现得不一致,是因为 onChange 是它的行为的一个错误称呼,并且 React 依赖于此事件来实时地响应用户输入。
  • 表单输入属性,例如 value 和 checked,以及 textarea

特殊的非 DOM 属性

除了与 DOM 的差异之外,React 也提供了一些 DOM 里面不存在的属性。

  • key:可选的唯一的标识器。当组件在渲染过程中被各种打乱的时候,由于差异检测逻辑,可能会被销毁后重新创建。给组件绑定一个 key,可以持续确保组件还存在 DOM 中。
  • dangerouslySetInnerHTML:提供插入纯 HTML 字符串的功能,主要为了能和生成 DOM 字符串的库整合。

转载于:https://www.cnblogs.com/tomblog/p/4783953.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/375564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

乘积的最大子数组

给你一个整数数组 nums ,请你找出数组中乘积最大的连续子数组(该子数组中至少包含一个数字),并返回该子数组所对应的乘积。 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 6。示例 2: 输入: [-2,0,-1] 输出…

javascript new

1. 仅function可以使用new 2. function使用new时,会拷贝function中this的内容给新对象,并将function的prototype指向新对象(如果该function没有prototype,则指向Object的prototype) 注:function本身不是Obj…

!+\v1 用来“判断浏览器类型”还是用来“IE判断版本”的问题!

这种写法是利用各浏览器对转义字符"\v"的理解不同来判断浏览器类型。在IE中,"\v"没有转义,得到的结果为"v"。而在其他浏览器中"\v"表示一个垂直制表符,所以ie解析的"\v1" 为 "v1&quo…

三个数的最大乘积

给定一个整型数组,在数组中找出由三个数组成的最大乘积,并输出这个乘积。 示例 1: 输入: [1,2,3] 输出: 6示例 2: 输入: [1,2,3,4] 输出: 24注意: 给定的整型数组长度范围是[3,104],数组中所有的元素范围是[-1000, 1000]。 输入的数组中任…

VB.NET 数组的定义 动态使用 多维数组

我们都知道在全部程序设计语言中数组都是一个非常重要的概念,数组的作用是同意程序猿用同一个名称来引用多个变量,因此採用数组索引来区分这些变量。非常多情况下利用数组索引来设置一个循环,这样就能够高效地处理复杂的情况,因此…

web.xml 中的listener、 filter、servlet 加载顺序

1:首先是context-param节点 2:接着配置和调用listeners 并开始监听 3:然后配置和调用filters filters开始起作用 4:最后加载和初始化配置在load on startup的servlets转载于:https://www.cnblogs.com/dwchenxj/p/4787717.html

这么多个月,我头一次体验用类的概念来写驱动

原来感觉一样是那么爽阿。。。快乐得不得了。。。转载于:https://www.cnblogs.com/suanguade/p/4038190.html

设置Chrome忽略网站证书错误

本人在XP下使用Chrome。总是莫名其妙的提示整数错误,一部分https网站无法直接访问。网上找了下,把解决思路记录下来。 解决这个问题很简单,只需要修改你平时用来启动Chrome的快捷方式就可以忽略掉证书错误. 具体的操作方法是这样的: 找到你的Chrome快捷方…

Android开发之合并文件的几种方式

以下介绍合并文件的几种方式,并通过合并amr文件来举例介绍合并文件的详细流程。amr格式的文件头是6字节,所以在进行文件合并的时候要减去除第一个文件以外的其它文件的文件头。 注意:不同文件的文件头是不一样的,所以在合并的时候…

数组中出现次数超过一半的数

数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1: 输入: [1, 2, 3, 2, 2, 2, 5, 4, 2] 输出: 2限制&#xff1a; 1 < 数组长度 < 50000class Solution { pub…

中国寒龙反网络病毒联盟核心小组:官方公告,近期本站将会发布各种编程技术视频教程,详情请点击我们的以下公告!...

大家好&#xff0c;我是中国寒反网络病毒联盟官方客服&#xff01; 近期&#xff0c;本站将全面升级&#xff0c;本站发布各种编程视频教程&#xff0c;包括C,c#以及VB&#xff0c;VB.net&#xff0c;E&#xff0c;等相关编程语言入门视频教程&#xff0c;每天会定期更新视频教…

javascript学习-原生javascript的小特效(多个运动效果整理)

以下代码就不详细解析了&#xff0c;在我之前的多个运动效果中已经解析好多次了&#xff0c;重复的地方这里就不说明了&#xff0c;有兴趣的童鞋可以去看看之前的文章《原生javascript的小特效》 <!DOCTYPE HTML> <html lang"en-US"> <head> <m…

linux在指定目录多个文件中搜索关键字

find 文件目录 -name *.* -exec grep xxx {} -n\;# -n显示行号find 文件目录 -name *.* | xargs grep xxx -ngrep xxx 文件目录 -Rngrep xxx find 文件目录 -name *.*

$ npm install opencv ? 你试试?! 在windows环境下,使用node.js调用opencv攻略

博主之前写过一篇文章《html5与EmguCV前后端实现——人脸识别篇》&#xff0c;叙述的是opencv和C#的故事。最近在公司服务器上更新了一套nodejs环境&#xff0c;早就听闻npm上有opencv模块&#xff0c;便欲部署之。然而opencv的部署似乎从来都不会那么顺利...... 找模块上https…

android学习——GestureDetector.OnGestureListener 详解

Android Touch Screen 与传统Click Touch Screen不同&#xff0c;会有一些手势(Gesture)&#xff0c;例如Fling&#xff0c;Scroll等等。这些Gesture会使用户体验大大提升。Android中的Gesture识别(detector)是通过GestureDetector.OnGestureListener接口实现的。 首先&#xf…

关于安卓一键分享的,急求帮助!

问题描述现在要做一个项目&#xff0c;设置里面点击一个按钮就可以分享&#xff0c;有三个分享平台&#xff0c;新浪微博&#xff0c;微信和微信朋友圈现在的问题是我要在三个平台分享的内容不同&#xff0c;在新浪微博中分享的是一段文字叙述和一个网页链接&#xff1b;而在微…

和可被 K 整除的子数组

给定一个整数数组 A&#xff0c;返回其中元素之和可被 K 整除的&#xff08;连续、非空&#xff09;子数组的数目。 示例&#xff1a; 输入&#xff1a;A [4,5,0,-2,-3,1], K 5 输出&#xff1a;7 解释&#xff1a; 有 7 个子数组满足其元素之和可被 K 5 整除&#xff1a;…

前端进阶路线图

CSS不能编程&#xff1f;用Less、Sass、Stylus、甚至直接用 Absurd&#xff0c;框架除了Bootstrap还有很多。JS写多了很麻烦&#xff1f;jQuery。移动开发&#xff1f;Zepto.js。结构不好&#xff1f;找框架&#xff0c;Backbone.js是MVC&#xff0c;AngularJS和Ember.js是MVVM…

流媒体直播服务LSS

流媒体直播服务LSS posted on 2014-10-22 11:23 实验室 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/labs/p/4042641.html

Win7安装vs2010失败

提示&#xff1a; --------------------------------------------------------------------------------------------------------------------------------------- 解决方法&#xff1a;开始运行中regedit打开注册表找到HKEY_LOCAL_MACHINE/System/CurrentControlSet/Control …