Skip to content

Commit

Permalink
fix some part according to review
Browse files Browse the repository at this point in the history
  • Loading branch information
summertree128 committed Feb 5, 2019
1 parent 44d821c commit 2c684c1
Showing 1 changed file with 11 additions and 8 deletions.
19 changes: 11 additions & 8 deletions content/docs/reference-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ category: Reference

## 概要

あなたの書くイベントハンドラには、 `SyntheticEvent` のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。`stopPropagation()``preventDefault()` を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちます。この 2つ以外はすべてのブラウザで同じように機能します
イベントハンドラには、`SyntheticEvent` のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。`stopPropagation()``preventDefault()` を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちつつ、ブラウザ間で同じ挙動をするようになっています

何らかの理由で実際のブラウザイベントが必要な場合は、単に `nativeEvent` 属性を使用するだけで取得できます。すべての `SyntheticEvent` オブジェクトは以下の属性を持っています。

Expand All @@ -33,16 +33,19 @@ string type

> 補足
>
> v0.14以降、イベントハンドラから false を返してもイベントの伝播が止まることはなくなりました。代わりに、`e.stopPropagation()` または `e.preventDefault()` を手動で呼び出す必要があります。
> v0.14以降、イベントハンドラから `false` を返してもイベントの伝播は止まりません。代わりに、`e.stopPropagation()` または `e.preventDefault()` を手動で呼び出す必要があります。

### イベントのプール

`SyntheticEvent` はプールされます。つまり、`SyntheticEvent` オブジェクトは再利用され、すべてのプロパティはイベントコールバックが呼び出された後に無効化されます。これはパフォーマンス上の理由からです。そのため、非同期的な方法でイベントにアクセスすることはできません。
`SyntheticEvent` はプールされます。つまり、`SyntheticEvent` オブジェクトは再利用され、すべてのプロパティはイベントコールバックが呼び出された後に `null` で初期化されます。
これはパフォーマンス上の理由からです。
そのため、非同期処理の中でイベントオブジェクトにアクセスすることはできません。


```javascript
function onClick(event) {
console.log(event); // => 無効なオブジェクト
console.log(event); // => null で初期化されるオブジェクト
console.log(event.type); // => "click"
const eventType = event.type; // => "click"

Expand All @@ -51,7 +54,7 @@ function onClick(event) {
console.log(eventType); // => "click"
}, 0);

// これは動作しません。this.state.clickEvent はnull値のみを保持します
// これは動作しません。this.state.clickEvent は null 値のみを持つオブジェクトとなります
this.setState({clickEvent: event});

// イベントプロパティをエクスポートすることは可能です。
Expand All @@ -61,13 +64,13 @@ function onClick(event) {

> 補足
>
> 非同期処理でイベントのプロパティにアクセスしたい場合は`event.persist()` をイベント内で呼び出す必要があります。これにより、プールから合成イベントが削除され、イベントへの参照をコードで保持できるようになります。
> 非同期処理の中でイベントのプロパティにアクセスしたい場合は`event.persist()` をイベント内で呼び出す必要があります。これにより、合成イベントがイベントプールの対象から除外され、イベントへの参照をコードで保持できるようになります。
## サポートするイベント

React はイベントを正規化して、異なるブラウザ間で一貫したプロパティが保持されるようにしています。

以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます。キャプチャフェーズのイベントハンドラを登録するには、イベント名に `Capture` を追加します。たとえば、`onClick` の代わりに `onClickCapture` を使用して、キャプチャフェーズでクリックイベントを処理します
以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます。キャプチャフェーズのイベントハンドラを登録するには、イベント名に `Capture` を追加します。たとえば、キャプチャフェーズでクリックイベントを処理するには `onClick` の代わりに `onClickCapture` を使用します

- [クリップボードイベント](#clipboard-events)
- [コンポジションイベント](#composition-events)
Expand Down Expand Up @@ -245,7 +248,7 @@ boolean isPrimary

クロスブラウザサポートについての補足:

すべてのブラウザでポインタイベントがサポートされているわけではありません(この記事の執筆時点でサポートされているブラウザは、Chrome、Firefox、Edge、および Internet Explorer です)。標準に準拠したポリフィルは `react-dom` のバンドルサイズを大幅に増加させるため、Reactは意図的に他のブラウザのポリフィルをサポートしません
すべてのブラウザでポインタイベントがサポートされているわけではありません(この記事の執筆時点でサポートされているブラウザは、Chrome、Firefox、Edge、および Internet Explorer です)。標準に準拠したポリフィルは `react-dom` のバンドルサイズを大幅に増加させるため、React は意図的にその他ブラウザのためのポリフィルを提供しません

アプリケーションでポインタイベントが必要な場合は、サードパーティのポインタイベントポリフィルを追加することをお勧めします。

Expand Down

0 comments on commit 2c684c1

Please sign in to comment.