React中的事件模型

React事件模型跟在原生DOM元素的事件模型非常相似。但是有一些语法上的区别：

• React 事件使用驼峰命名，而不是全部小写。
• 通过 JSX , 传递一个函数作为事件处理程序，而不是一个字符串。

<button onclick="activateLasers()">
  Activate Lasers
</button>

<button onClick={activateLasers}>
  Activate Lasers
</button>

• 在 React 中你不能通过返回 return false 来阻止默认行为。必须显式调用 preventDefault 。

从v0.14起，从事件处理程序返回 false 将不再停止事件冒泡。 应该根据需要手动 e.stopPropagation() 或 e.preventDefault() 。

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

React中的事件对象e是一个合成对象，而不是原生的事件对象，React已经对这个对象进行了封装，处理了浏览器兼容问题。

• 这个对象是SyntheticEvent 的实例，这是一个跨浏览器原生事件包装器。 它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() ，除了事件在所有浏览器中他们工作方式都相同。
• React的事件处理程序由冒泡阶段中的事件触发。 要为捕获阶段注册事件处理程序，使用 onClickCapture 来处理捕获阶段中的点击事件，而不是使用 onClick 。

在React中获取事件对象时有两种形式

• 通过箭头函数显式传入
• 通过bind隐式传入 e会作为最后一个参数隐式传入

<li onClick={e=>{this.changeActive(e,"a")}}>用户管理</li>
<li onClick={this.changeActive.bind(this,"b")}>适配器管理</li>
changeActive(param1,param2){
   console.log(param1);
   console.log(param2);
   console.log(this);
}

bind函数和箭头函数也是在React事件传参的方法

React中的事件处理程序由冒泡阶段中的事件触发。

要为捕获阶段注册事件处理程序，将 Capture 附加到事件名称中;使用 onClickCapture 来处理捕获阶段中的点击事件，而不是使用 onClick 。

React事件中的冒泡

1. 组织React合成事件冒泡

e.stopPropagation()

2. 阻止React合成事件与最外层document上的事件间的冒泡

e.nativeEvent.stopImmediatePropagation();

React中给window或者document绑定事件 在组件卸载的时候需要注销