React的合成事件

React的事件處理使用合成事件(SyntheticEvent)，不是原生事件。

1. 合成事件的異步訪問

合適事件為了節約性能，使用對象池。當一個合成事件對象被使用完畢，即調用該對象的同步代碼執行完畢，該對象會被再次利用。
其屬性會被重置為null。所以異步訪問合適事件的屬性，是無效的。

解決方法有兩種：

1.1 用變量記錄事件屬性值

用變量記錄合成事件的屬性值，在異步程序中訪問，就沒有任何問題了。

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);
}

1.2 用e.persist()方法

e.persist()方法，會將當前的合成事件對象，從對象池中移除，就不會回收該對象了。對象可以被異步程序訪問到。

2. 合成事件阻止冒泡

2.1 e.stopPropagation

只能阻止合成事件間冒泡，即下層的合成事件，不會冒泡到上層的合成事件。事件本身還都是在document上執行。最多只能阻止document事件不能再冒泡到window上。

2.2 e.nativeEvent.stopImmediatePropagation

能阻止合成事件不會冒泡到document上。

可以實現點擊空白處關閉菜單的功能：

在菜單打開的一刻，在document上動態注冊事件，用來關閉菜單。
點擊菜單內部，由於不冒泡，會正常執行菜單點擊。
點擊菜單外部，執行document上事件，關閉菜單。
在菜單關閉的一刻，在document上移除該事件，這樣就不會重復執行該事件，浪費性能。

也可以在window上注冊事件，這樣可以避開document。