摘要：按鈕中使用原生事件中提供了很好的合成事件系統(tǒng)，但有時(shí)候也需要用到原生事件。而使用合成事件系統(tǒng)時(shí)則不需要，因?yàn)閮?nèi)部以及處理了。事件類型鍵盤事件焦點(diǎn)事件表單事件鼠標(biāo)事件選擇事件觸摸事件事件動(dòng)畫事件圖像事件媒體事件剪貼板事件上一篇開發(fā)教程六與

Virtual DOM在內(nèi)存中是以對象的形式存在的，如果想要在這些對象上添加事件的話，React是基于Virtual DOM實(shí)現(xiàn)了一個(gè)合成事件層，他完全符合w3c標(biāo)準(zhǔn)，不存在ie的兼容問題。并且擁有和瀏覽器原生事件一樣的接口，支持冒泡，可以使用stopPropagation()和preventDefault()來中斷它。好吧不要想太多記住就是和瀏覽器事件一樣，處了調(diào)用形式

簡單的很

//jsx：
按鈕
//瀏覽器原生：
按鈕

react只是借鑒DOM0級事件的這種寫法

在react組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定this為當(dāng)前組件。而且React還會(huì)對這種引用進(jìn)行緩存，以達(dá)到CPU和內(nèi)存的最優(yōu)化。在使用ES6 class或者純粹函數(shù)時(shí)，這種綁定就不復(fù)存在了，我們需要手動(dòng)實(shí)現(xiàn)this綁定

這個(gè)方法可以幫助我們綁定事件處理器內(nèi)的this，并且可以向事件處理器中傳遞參數(shù)

import React, { Component } form "react";

class App extends Component {
    handleClick (e, arg) {
        console.log(e, arg)
    }
    render () {
        return (
            按鈕
        )
    }
}

在組件的構(gòu)造器內(nèi)完成了this的綁定，這種綁定方式的好處在于僅需要進(jìn)行一次綁定，而不需要每次調(diào)用事件監(jiān)聽器時(shí)去執(zhí)行綁定操作。

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 (
            按鈕
        )
    }
}

箭頭函數(shù)不僅是函數(shù)的語法糖，它還自動(dòng)綁定定義此函數(shù)作用域的this，因此我們不需要對它使用bind方法。

import React, { Component } form "react";

class App extends Component {
    constructor () {
        super();
        this.handleClick = (e, arg) => {
          console.log(e, arg)
        }
    }
 
    render () {
        return (
            按鈕
        )
    }
}

React中提供了很好的合成事件系統(tǒng)，但有時(shí)候也需要用到原生事件。在React生命周期中提供了componentDidMount會(huì)在組件已經(jīng)完成安裝并且在瀏覽器中存在真實(shí)的DOM后調(diào)用，此時(shí)我們就可以完成原生事件的綁定。比如：

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事件時(shí)，一定要在組件卸載時(shí)手動(dòng)移除，否則很可能出現(xiàn)內(nèi)存泄漏的問題。2而使用合成事件系統(tǒng)時(shí)則不需要，因?yàn)镽eact內(nèi)部以及處理了。

onKeyDown
onKeyPress
onKeyUp

onFocus
onBlur

onChange
onInput
onSubmit

onClick
onContextMenu
onDoubleClick
onMouseDown
onMouseUp
onMouseOver
onMouseOut
onMouseMove
onMouseEnter
onMouseLeave
onDrag

onSelect

onTouchCancel
onTouchEnd
onTouchMove
onTouchStart

onScroll

onAnimationStart
onAnimationEnd
onAnimationIteration

onLoad
onError

onPause
onPlay
onCanPlay
onLoadStart
onProgress

onCopy
onCut
onPaste

上一篇：react開發(fā)教程（六）React與DOM