事件

React中的事件处理类似于在HTML标签中通过属性来设置事件，像是这样：

<button onclick="alert('你点我干嘛');">点我一下</button>

这是传统DOM中绑定事件的方式之一，onclick全都小写是事件的名字，它的值是一组JS代码，当事件触发时，JS代码便会执行。记住这一点，传统DOM中事件属性的JS代码在事件触发时执行！

React中的事件绑定是这样的：

const clickHandler = ()=> {
    alert('你点我干嘛');
};
const ele = <button onClick={clickHandler}>我是一个按钮</button>;

两者长得很像，但是也有很大的区别：

1. React事件使用的是驼峰命名法
2. 事件属性值需要的是一个函数对象，而不是调用函数

React事件名使用的是驼峰命名法而不是纯小写事件，所以在React中设置事件时onclick应该写为onClick，其他的事件也是如此。

React事件的属性值需要的是一个回调函数，函数会在触发时执行，所以上例中我写的clickHandler是没有加()的，如果加了()函数会在赋值时立刻执行，而赋值给onClick事件的将是函数的返回值undefined，这将导致事件的设置失效，这一点你可以自己试试看。

事件对象

React事件也会产生事件对象，在事件的响应函数中可以定义第一个参数来获取事件对象：

const clickHandler = (e)=> {
    // e 表示事件对象
    console.log(e);
    alert('你点我干嘛');
};

这个事件对象是由React所创建的事件对象，和原生的事件对象类似，但使用它我们不需要担心兼容的问题。使用事件对象可以完成像原生DOM中事件对象的各种操作，比如取消默认行为和取消事件的冒泡：

const clickHandler = (e)=> {
    e.preventDefault(); // 取消默认行为
    e.stopPropagation(); // 取消事件的传播
    // 其他代码
};