事件机制

原生事件机制

事件捕获

当某个元素触发某个事件（如 onclick ），顶层对象 document 就会发出一个事件流，随着 DOM 树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件冒泡

从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发一次。如果想阻止事件起泡，可以使用 e.stopPropagation() 或者 e.cancelBubble=true(IE) 来阻止事件的冒泡传播。

事件委托/事件代理

将一个响应事件委托到另一个元素。当子节点被点击时，click 事件向上冒泡，父节点捕获到事件后，我们判断是否为所需的节点，然后进行处理。其优点在于减少内存消耗和动态绑定事件。

React 中事件

对于事件处理，React 提供了一系列属性。解决方案几乎和使用标准化 DOM 完全一样。也有一些不同点，比如使用驼峰式或传入的是函数，但总体来说，还是十分相似的。

const showAlert = () => alert('Clicked');

<Button onClick={ showAlert } />
<input type='text' onChange={event => showAlert(event.target.value) } />

React 合成事件

抹平不同浏览器API 的差异，更便于跨平台 事件合成可以处理兼容性问题 利用事件委托机制，支持动态绑定，简化了DOM 事件处理逻辑，减少了内存开销