Angular 入門

ホーム > React の基礎 > シンセティックイベントとは

シンセティックイベントとは

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 でとれることになっています。

シンセティック・イベントはプールされていることから、使うときに少し注意が必要です。 その点については次のイベント・プーリングの記事を見てください。

イベント・プーリング

ホーム > React の基礎 > シンセティックイベントとは