シンセティックイベントとは
「React コンポーネントの状態とイベント処理」では、 ページの状態と、各種イベントに対応する基本事項について説明しました。
ここでは、少しだけ掘り下げてみましょう。
ポイントは シンセティック・イベント (Synthetic events) と イベント・プーリング (Event Pooling) です。
まずは、シンセティック・イベントからみてみましょう。
React では Synthetic イベントを受け取る
イベント処理は昔からブラウザの互換性に問題がある場所として知られています。
あるブラウザではイベントハンドラで、これこれのタイプのオブジェクトを受け取り、一方で、こちらのブラウザでは異なるタイプのオブジェクトを受け取る。 だから、どちらのブラウザでも同様に動くコードを書くのが厄介、ということが開発者の悩みの種でした。
まさにこれこそが、各種ラッパーライブラリを使う動機の一つでしょう。 とてもじゃないけど、自分でラッパーまで書かないといけないとなると、 大変でやってられないわけです。
React でも、もちろんこの点は抜かりなく、イベントハンドラでは Synthetic イベントを受けとることになっています。
Synthetic イベントは次のようなプロパティやメソッドを持っています。
boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() boolean isDefaultPrevented() void stopPropagation() boolean isPropagationStopped() DOMEventTarget target number timeStamp string type
ラッパーオブジェクトと言っても、preventDefault() や stopPropagation などの DOM イベントのメソッドはすぐに呼べるようになっていて便利ですね。
オブジェクトの元の DOM ターゲットは target でとれることになっています。
シンセティック・イベントはプールされていることから、使うときに少し注意が必要です。 その点については次のイベント・プーリングの記事を見てください。