摘要：按鈕中使用原生事件中提供了很好的合成事件系統，但有時候也需要用到原生事件。而使用合成事件系統時則不需要，因為內部以及處理了。事件類型鍵盤事件焦點事件表單事件鼠標事件選擇事件觸摸事件事件動畫事件圖像事件媒體事件剪貼板事件上一篇開發教程六與

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

簡單的很

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

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

在react組件中，每個方法的上下文都會指向該組件的實例，即自動綁定this為當前組件。而且React還會對這種引用進行緩存，以達到CPU和內存的最優化。在使用ES6 class或者純粹函數時，這種綁定就不復存在了，我們需要手動實現this綁定

這個方法可以幫助我們綁定事件處理器內的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生命周期中提供了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

onScroll

onAnimationStart
onAnimationEnd
onAnimationIteration

onLoad
onError

onPause
onPlay
onCanPlay
onLoadStart
onProgress

onCopy
onCut
onPaste

上一篇：react開發教程（六）React與DOM