资讯专栏INFORMATION COLUMN

react开发教程(七)React事件系统

walterrwu / 368人阅读

摘要:按钮中使用原生事件中提供了很好的合成事件系统,但有时候也需要用到原生事件。而使用合成事件系统时则不需要,因为内部以及处理了。事件类型键盘事件焦点事件表单事件鼠标事件选择事件触摸事件事件动画事件图像事件媒体事件剪贴板事件上一篇开发教程六与

事件系统

Virtual DOM在内存中是以对象的形式存在的,如果想要在这些对象上添加事件的话,React是基于Virtual DOM实现了一个合成事件层,他完全符合w3c标准,不存在ie的兼容问题。并且拥有和浏览器原生事件一样的接口,支持冒泡,可以使用stopPropagation()和preventDefault()来中断它。好吧不要想太多记住就是和浏览器事件一样,处了调用形式

合成事件的绑定方式

简单的很

//jsx:

//浏览器原生:

react只是借鉴DOM0级事件的这种写法

绑定方法

在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件。而且React还会对这种引用进行缓存,以达到CPU和内存的最优化。在使用ES6 class或者纯粹函数时,这种绑定就不复存在了,我们需要手动实现this绑定

bind方法

这个方法可以帮助我们绑定事件处理器内的this,并且可以向事件处理器中传递参数

import React, { Component } form "react";

class App extends Component {
    handleClick (e, arg) {
        console.log(e, arg)
    }
    render () {
        return (
            
        )
    }
}
构造器内声明

在组件的构造器内完成了this的绑定,这种绑定方式的好处在于仅需要进行一次绑定,而不需要每次调用事件监听器时去执行绑定操作。

import React, { Component } form "react";

class App extends Component {
    constructor () {
        super();
        this.handleClick = this.handleClick.bind(this,arg);
    }
    handleClick (e, arg) {
        console.log(e, arg)
    }
    render () {
        return (
            
        )
    }
}
箭头函数

箭头函数不仅是函数的语法糖,它还自动绑定定义此函数作用域的this,因此我们不需要对它使用bind方法。

import React, { Component } form "react";

class App extends Component {
    constructor () {
        super();
        this.handleClick = (e, arg) => {
          console.log(e, arg)
        }
    }
 
    render () {
        return (
            
        )
    }
}
React中使用原生事件

React中提供了很好的合成事件系统,但有时候也需要用到原生事件。在React生命周期中提供了componentDidMount会在组件已经完成安装并且在浏览器中存在真实的DOM后调用,此时我们就可以完成原生事件的绑定。比如:

import React, { Component } form "react";

class App extends Component {
    constructor () {
        super();
    }
    
    componentDidMount () {
        this.refs.button.addEventListener("click", e => {
            handleClick(e);
        })
    }
    
    handleClick (e) {
        console.log(e)
    }
    
    componentWillUnmount () {
        this.refs.button.removeEventListener("click")
    }
    
    render () {
        return (
            
        )
    }
}
一定要注意在React中使用原生DOM事件时,一定要在组件卸载时手动移除,否则很可能出现内存泄漏的问题。2而使用合成事件系统时则不需要,因为React内部以及处理了。
事件类型 键盘事件

onKeyDown
onKeyPress
onKeyUp

焦点事件

onFocus
onBlur

表单事件

onChange
onInput
onSubmit

鼠标事件

onClick
onContextMenu
onDoubleClick
onMouseDown
onMouseUp
onMouseOver
onMouseOut
onMouseMove
onMouseEnter
onMouseLeave
onDrag

选择事件

onSelect

触摸事件

onTouchCancel
onTouchEnd
onTouchMove
onTouchStart

UI事件

onScroll

动画事件

onAnimationStart
onAnimationEnd
onAnimationIteration

图像事件

onLoad
onError

媒体事件

onPause
onPlay
onCanPlay
onLoadStart
onProgress

剪贴板事件

onCopy
onCut
onPaste

上一篇:react开发教程(六)React与DOM

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87178.html

相关文章

  • react开发教程(六)React与DOM

    摘要:当组件装载完毕时,就会被调用。它可以是一个回调函数,这个回调函数会在组件被挂载后立即执行。也可以是一个字符串吧放到原生的组件中,我们可以通过获取到节点而如果吧放到组件上获取到的就是组件的实例上一篇开发教程五生命周期下一篇开发教程七事件系统 ReactDOM findeDOMNode 语法:DOMElement findDOMNode(ReactComponent component)...

    call_me_R 评论0 收藏0
  • 玩转 React(一)- 前言

    摘要:本人计划编写一个针对中初级前端开发者学习的系列教程玩转。使用的原因是新的语言规范开发效率更高代码更优雅,尤其是基于开发的项目。其次也是目前特别流行的一个前端框架,截止目前,上有将近万,国内一二线互联网公司都有深度依赖开发的项目。 本人计划编写一个针对中初级前端开发者学习 React 的系列教程 - 《玩转 React》。 文章更新频率:每周 1 ~ 2 篇。 目录 玩转 React(...

    waltr 评论0 收藏0

发表评论

0条评论

walterrwu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<