赵走x博客 - 开发者的网上家园

7、关于DOM 事件的说明

资源编号:76055 书籍 React快速上手开发热度：78

出于性能、便捷性与合理性考虑，React 使用了自身的合成事件系统。

以下这行代码有几点需要说明：
```
onChange: this._textChange
```
出于性能、便捷性与合理性考虑，React 使用了自身的合成事件系统。为了帮助你理解为什么这样做，我们先来看看在原始DOM 世界里是怎么实现事件处理的。

# 1、传统的事件处理
使用内联事件处理器是非常方便的，就像这样：
```
<button onclick="doStuff">
```
尽管这样做很方便也易于阅读（事件处理和界面代码放在一起），但是当很多事件处理函数像这样散落在界面代码各处时，就显得效率低下了。而且在同一个按钮中设置多个事件监听器也很困难，特别是当按钮位于其他人的“组件”中时，你是不会愿意到他们的代码中修改源代码的。这就是在DOM 世界中，人们使用element.addEventListener（这样会导致代码分散到两个甚至多个地方）和事件委托（为了解决性能问题）设置事件监听的原因。事件委托意味着你可以在某个父节点监听事件。比如当一个<div> 包含许多按钮时，只需要为所有按钮设置一个监听器即可。

使用事件委托的代码如下所示：
```
<div id="parent">
<button id="ok">OK</button>
<button id="cancel">Cancel</button>
</div>
<script>
	document.getElementById('parent').addEventListener('click', function(event) {
		var button = event.target;
		// 根据具体点击的按钮进行不同操作
		switch (button.id) {
			case 'ok':
				console.log('OK!');
				break;
			case 'cancel':
				console.log('Cancel');
				break;
			default:
				new Error('Unexpected button ID');
		};
	});
</script>
```
尽管方法奏效，性能也不错，但是它仍有一些缺点。

* 监听器的声明代码远离视图组件，使得代码难以搜索与调试。

* 使用委托总要经过switch 结构，在你开始进行实际逻辑编写之前，需要创建不必要的样板代码。

* 实际中为处理浏览器的不一致性（上述代码中省略了这一步骤），会让代码变得更加冗长。不幸的是，在你打算把这段代码放到真实环境给用户使用之前，还需要做更多工作，以支持所有主流浏览器。

* 除了addEventListener 之外还需要attachEvent。
* 要在监听器顶部使用event = event || window.event;。
*  需要使用var button = event.target || event.srcElement;。

尽管以上所有都是必需的，但是非常令人厌烦，因此你最终可能会选用某种类型的事件库作为代替。然而，React 自带一套解决方案来帮助你摆脱事件处理的噩梦，为什么还要添加另一个库（并学习更多的API）呢？

# 2、React 的事件处理
为了包裹并规范浏览器事件，React 使用了合成事件来消除浏览器之间的不一致情况。有了React 的帮助，现在你可以依靠event.target 在所有浏览器中取得想要的值了。这就是在TextAreaCounter 代码片段中，你只需要使用ev.target.value 就可以正常工作的原因。

与此同时，取消事件的API 在所有浏览器中都通用了；event.stopPropagation() 和event.preventDefault() 甚至在老版本IE 浏览器中也可以生效。

这种语法轻松地把视图和事件监听绑定在一起。虽然其语法看起来就像传统的内联事件处理器一样，但背后的实现原理并非如此。事实上，React 基于性能考虑，使用了事件委托。

此外，React 在事件处理中使用驼峰法命名，因此你需要使用onClick 代替onclick。

如果你出于某种原因需要使用原生的浏览器事件，可以使用event.nativeEvent，但估计你不太可能会用得上。

还有一件事情需要注意。onChange 事件（在文本框例子中已经用到）的行为和你预期中是一样的：当用户输入时触发，而不是像原生DOM 事件那样，在用户结束输入并把焦点从输入框移走时才触发。