此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第七篇，主要介绍react中的事件处理。

事件处理

（1）通过onXxx属性指定事件处理函数（注意大小写）

        1.react使用的是自定义(合成)事件，而不是使用原生dom事件，为了兼容性

        在原生js中，我们添加一个点击事件，是元素.onclick。但在react中略有不同，使用的是onClick，react中的事件处理函数与元素js都不一样，就是on后那个字母必须大写。onClick是react对onclick的二次封装，是与原生js语法进行区分，也是为了更好的兼容性。

      2.react中的事件是通过事件委托方式处理的（委托给组件最外层的元素）,为了高效

        我们还记得JavaScript中的事件委托吧，react的事件处理就是利用了这个事件委托。假如有一对ul标签，ul中有很多的li标签，我们给li添加事件处理的时候，比如说点击事件，我们会给那么多li标签一个一个的加点击事件吗？当然不会，我们直接给外侧的ul添加点击事件，点击li的时候通过事件冒泡，冒泡到ul，触发点击事件，达到我们想要的结果，实现了高效。

先看代码：

render() {return (//构建虚拟dom<div><input ref={this.myRef} type="text" placeholder="点击按钮提示内容" /><button onClick={this.showInfo}>点我提示输入的数据</button><input ref={this.myRef2} onBlur={this.showInfo2} type="text" placeholder="失去焦点提示内容" /></div>)
}

 实际上react将input上的事件，加给了最外层的div，与ul和li相同。

（2）通过event.target得到发生事件的dom元素对象

        首先在，react的官方文档，介绍Refs时，官网上说：勿过度使用Refs。请看上个学习笔记的案例，我们尝试省略一个ref。在案例中我们写了一个： onBlur是失去焦点事件。

<input ref={this.myRef2} onBlur={this.showInfo2} type="text" placeholder="失去焦点提示内容" />

相应的事件方法：

showInfo2 = () => {alert(this.myRef2.current.value)
}

        这此input内我们有ref，有onBlur事件，我们给input以ref标识，在实例内写的showInfo2方法再通过ref标识来实现事件。

        现在我们可以省略ref，直接写事件函数，完成事件。代码如下：

<input onBlur={this.showInfo2} type="text" placeholder="失去焦点提示内容" />

事件方法如下：

showInfo2 = (event) => {alert(event.target.value)
}

我们省略了ref，改写了事件方法。事件方法内传入了一个参数event，这个参数是事件方法自动传入的，就是添加了事件的这个标签。所以可以在事件方法里面直接对标签进行操作。event.taget就是这个dom元素对象。所以我们  alert(event.target.value) 就可以直接显示出input框内的值。

可见，我们虽然省略了ref，但仍然可以实现我们相要的效果。所以说，绑定事件的，发生事件的那个元素，可以去省略ref，但仍然完成对这个元素的操作。