• 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 字符串的库整合。
  • 相关阅读:
    20155239 2017-2018-1《信息安全系统设计》第二周课堂测试
    第一次课下测试试题补做
    20155239吕宇轩 《信息安全系统设计基础》第一周学习总结
    C语言指针学习
    C语言 迭代部分的代码编写
    20155234 2016-2017-2第十周《Java学习笔记》学习总结
    20155234 实验二 Java面向对象程序设计
    20155234 2610-2017-2第九周《Java学习笔记》学习总结
    20155234 2016-2017-2 《Java程序设计》第8周学习总结
    20155234 2016-2017-2 《Java程序设计》第7周学习总结
  • 原文地址:https://www.cnblogs.com/tomblog/p/4783953.html
Copyright © 2020-2023  润新知