[](https://parg.co/U0I)
# 事件应用实践
# 点击事件
## 外部触发关闭
点击事件是 Web 开发中常见的事件之一，我们在上文中介绍的基本事件绑定也是以点击事件为例。这里我们想讨论下另一个常见的与点击相关的需求，即点击组件外部分触发事件处理。典型的用例譬如在弹出窗中，我们希望点击弹出窗外的部分自动关闭弹出窗，或者某个下拉菜单打开状态下，点击其他部分自动关闭该菜单。这种需求有一种解决思路是为组件设置一个全局浮层，这样可以将组件外的点击事件绑定到浮层上，直接监听浮层的点击即可。不过很多产品经理在提需求的时候是不喜欢这种方式的，因此我们可以使用另一种方法，直接在 React 根容器中监听点击事件:
```
window.__myapp_container = document.getElementById('app')
React.render(
, window.__myapp_container)
```
然后在组件中我们动态的设置对于根元素的监听：
```
import { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
export default class ClickListener extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
onClickOutside: PropTypes.func.isRequired
}
componentDidMount () {
window.__myapp_container.addEventListener('click', this.handleDocumentClick)
}
componentWillUnmount () {
window.__myapp_container.removeEvent
