zoukankan      html  css  js  c++  java
  • React event

    React event

    组件:

    • 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 来在捕获阶段处理点击事件。

    1、剪贴板事件

    事件名:
    onCopy 
    onCut
    onPaste 属性: DOMDataTransfer clipboardData

    2、键盘事件:

    事件名:
    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

    3、焦点事件

    事件名:
    onFocus 
    onBlur 属性: DOMEventTarget relatedTarget

    4、表单事件

    事件名:
    onChange 
    onInput
    onSubmit

    5、鼠标事件

    事件名:
    onClick 
    onContextMenu:右键,上下文菜单
    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

    6、触摸事件

    为了使触摸事件生效,在渲染所有组件之前调用

    React.initializeTouchEvents(true)。该方法是React顶层API

    initializeTouchEvents(boolean shouldUseTouch)

    配置 React 的事件系统,使 React 能处理移动设备的触摸( touch )事件。

    事件名:
    onTouchCancel 
    onTouchEnd
    onTouchMove
    onTouchStart 属性: boolean altKey DOMTouchList changedTouches boolean ctrlKey function getModifierState(key) boolean metaKey boolean shiftKey DOMTouchList targetTouches DOMTouchList touches

    7、UI 事件

    事件名:
    onScroll:元素或页面的滚动事件
    
    属性:
    Number detail
    DOMAbstractView view

    8、鼠标滚轮滚动事件

    事件名:
    onWheel:监听滚动的位置、方向
    
    属性:
    Number deltaMode:单位
    Number deltaX
    Number deltaY
    Number deltaZ:坐标轴对应的位置

    三、自定义事件

    没有嵌套关系的组件(如兄弟组件)之间的通信,只能通过自定义事件的方式来进行。

    详见:https://www.cnblogs.com/Michelle20180227/p/9105585.html

    var EventEmitter = require('events').EventEmitter;
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
    
    let emitter = new EventEmitter();
    
    class ListItem extends Component{
        static defaultProps = {
            checked: false
        };
        constructor(props){
            super(props);
        }
        render(){
            return (
                <li>
                    <input type="checkbox" checked={this.props.checked} onChange={this.props.onChange} />
                    <span>{this.props.value}</span>
                </li>
            );
        }
    }
    
    class List extends Component{
        constructor(props){
            super(props);
    
            this.state = {
                list: this.props.list.map(entry=>({
                    text:entry.text,
                    checked:entry.checked || false
                }))
            };
            console.log(this.state);
        }
    
        onItemChange(entry){
            const {list} = this.state;
            this.setState({
                list:list.map(prevEntry=>({
                    text: prevEntry.text,
                    checked:prevEntry.text === entry.text? !prevEntry.checked : prevEntry.checked
                }))
            });
            //这里触发事件
            emitter.emit('ItemChange',entry);
        }
        render(){
            return (
                <div>
                    <ul>
                        {this.state.list.map((entry,index)=>{
                            return (<ListItem
                                key={`list-${index}`}
                                value = {entry.text}
                                checked = {entry.checked}
                                onChange = {this.onItemChange.bind(this, entry)}
                            />);
                        })}
                    </ul>
                </div>
            );
        }
    }
    
    class App extends Component{
        constructor(props){
            super(props);
        }
        componentDidMount(){
            this.itemChange = emitter.addListener('ItemChange',(msg,data)=>console.log(msg));//注册事件
        }
        componentWillUnmount(){
            emitter.removeListener(this.itemChange);//取消事件
        }
        render(){
            return (
                <List list={[{text:1},{text:2}]}/>
            )
        }
    }
    
    ReactDOM.render(
        <App/>,
        document.getElementById('root')
    );
  • 相关阅读:
    UC将发布高性能HTML5游戏引擎XCanvas
    一台晚会3.15拯救不了这些高科技公司
    4G时代更有利于TDD的发展
    【leetcode】Binary Tree Zigzag Level Order Traversal
    四月电商价格战火重燃 服务为决胜之道
    linux sysfs(3)
    ubuntu gedit 中文显示乱码解决方法
    研究人员将Windows Phone 7和Windows Azure推广到平流层的大气污染研究中
    迁移周系列II/II: On Premises 迁移视频
    玩Rock, Paper, Azure Challenge,赢取免费Kinect和Xbox 360!
  • 原文地址:https://www.cnblogs.com/Michelle20180227/p/8681853.html
Copyright © 2011-2022 走看看