react事件机制
react基于浏览器原生事件机制,封装了一套自己的事件机制,包括事件注册、事件合成、冒泡和捕获、事件执行等。react并没有将事件绑定到具体的dom节点上,而是注册到document对象上,基于事件冒泡机制,所有节点的事件处理都会在document上触发,会由统一的事件处理程序进行处理。
结论:
原生事件阻止冒泡肯定会阻止合成事件的触发。
合成事件的阻止冒泡不会影响原生事件。
react自己实现合成事件机制的意义:
1.减少内存消耗,提升性能,不需要注册那么多的事件了,一种事件类型只在 document 上注册一次;
2.统一规范,解决 ie 事件兼容问题,简化事件逻辑
3.对开发者友好
4.优化事件处理:比如给input绑定onchange事件,原生事件只会在onBlur时触发,然后才能得到最新的值,react会同时帮我们注册onBlur onKeydown等事件,可实时得到值,优化了交互体验。
要点:
- react合成事件中的事件对象e(SyntheticEvent是基类,下属可能有 SyntheticMouseEvent、SyntheticFocusEvent)不是原生事件对象,而是react包装过的事件对象(原生对象包含在 e.nativeEvent字段上)