React事件处理机制

1.react事件并没有绑定到dom节点上而是绑定到了document,然后由统一的事件处理程序来处理,同时基于浏览器的事件冒泡机制,所有节点的事件会在document上触发

2.原生事件阻止冒泡会阻止合成事件的触发 合成事件的阻止冒泡不会影响原生事件

3.浏览器的事件执行顺序 捕获-目标元素-冒泡 节点上的原生事件执行在目标阶段,合成事件则执行在冒泡阶段

原生事件的阻止会影响合成事件 合成事件的阻止不会影响原生事件

4.react合成事件的意义: 减少内存消耗,提升性能,一种事件类型只在document上执行一次;统一规范,解决IE事件兼容性

5.对合成事件的理解 :react基于原生事件进行的封装,对一些原生事件进行了升级和改造,以及不通浏览器兼容的处理

6.事件注册机制:事件注册及事件存储

a.事件注册:组件挂载阶段,根据组件内的事件类型,通过addEventListener给document添加事件,并指定统一的事件处理程序dispatchEvent

b.事件存储:把react组件内的所有事件统一存放到一个对象里,缓存起来,在触发对应事件的时候找到对应的方法去执行

7.事件执行机制:

a:进入统一的事件分发函数(dispatchEvent)

b:结合原生事件找到当前节点对应的ReactDomComponent对象

c:开始事件的合成:根据当前事件类型生成指定的合成对象,封装原生事件和冒泡机制,查找当前元素及他的父级,在listenerBank对象中查找事件回掉并合成到event

d:批量处理合成事件内的回调事件

 

你可能感兴趣的:(react.js,javascript,html)