框架篇-面试题8-React事件绑定原理

在React中,事件绑定采用驼峰命名方式,而不是DOM元素中的小写字母命名方式,例如:onclick要写成onClick,onchange要写成onChange等

React中绑定的事件不是原生事件,而是由原生事件合成的React事件,例如:click事件合成为onClick事件,blur,change,input,keydown,keyup等合成为onChange,React这么做的原因是为了消除不同浏览器之间的差异

React事件的工作原理主要分为以下几个步骤

[1]. 收集事件监听器:React会将事件监听器收集到一个数组中,其中包括目标元素的监听器和根元素的监听器

[2]. 获取所有事件:React会将所有事件名处理成domEventName和reactEventName,即react事件名和dom事件名的对应关系

React会遍历simpleEventPluginEvents列表,将事件名处理成domEv