What is SyntheticEvent in react?

[zhouzhongyuan]

• “SyntheticEvent”是相对于"Event"来说的

• Event is API

• Event is part of DOM

• Event - Web APIs | MDN

• React源码分析6 — React合成事件系统 - 知乎专栏

• React源码分析6 — React合成事件系统(better style)

• SyntheticEvent - React

To Read

• [ ] React Transaction 机制 – 前端行知录

• [ ] React源码解读系列 -- 事件机制

重要

• EventPluginHub.js文件中putListener函数，onSelect和onClick注册了两个事件回调插件, 用于walkAround某些浏览器兼容bug,不用care

https://www.youtube.com/watch?v=dRo_egw7tBc https://github.com/facebook/react/pull/7616/files

[zhouzhongyuan]

.

[zhouzhongyuan]

Browsers fire mouse events after touch events.

What does it mean?

TouchEvent -> MouseEvent

It means:

It's important to note that in many cases, both touch and mouse events get sent (in order to let non-touch-specific code still interact with the user). If you use touch events, you should call preventDefault() to keep the mouse event from being sent as well.

form TouchEvent - Web APIs | MDN

Touch event types(All)

touchstart

touchend

touchmove

touchcancel

Mouse event types(Common using)

click

dblclick

mouseup

mousedown

[zhouzhongyuan]

How does click event listener callback be added?

Intro

• fbjs: A collection of utility libraries used by other Facebook JS projects.