@@ -10,7 +10,7 @@ category: Reference
10
10
11
11
## 概要
12
12
13
- あなたの書くイベントハンドラには、 ` SyntheticEvent ` のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。` stopPropagation() ` と ` preventDefault() ` を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちます。この 2つ以外はすべてのブラウザで同じように機能します 。
13
+ イベントハンドラには、 ` SyntheticEvent ` のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。` stopPropagation() ` と ` preventDefault() ` を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちつつ、ブラウザ間で同じ挙動をするようになっています 。
14
14
15
15
何らかの理由で実際のブラウザイベントが必要な場合は、単に ` nativeEvent ` 属性を使用するだけで取得できます。すべての ` SyntheticEvent ` オブジェクトは以下の属性を持っています。
16
16
@@ -33,16 +33,19 @@ string type
33
33
34
34
> 補足
35
35
>
36
- > v0.14以降、イベントハンドラから false を返してもイベントの伝播が止まることはなくなりました 。代わりに、` e.stopPropagation() ` または ` e.preventDefault() ` を手動で呼び出す必要があります。
36
+ > v0.14以降、イベントハンドラから ` false ` を返してもイベントの伝播は止まりません 。代わりに、` e.stopPropagation() ` または ` e.preventDefault() ` を手動で呼び出す必要があります。
37
37
38
38
39
39
### イベントのプール
40
40
41
- ` SyntheticEvent ` はプールされます。つまり、` SyntheticEvent ` オブジェクトは再利用され、すべてのプロパティはイベントコールバックが呼び出された後に無効化されます。これはパフォーマンス上の理由からです。そのため、非同期的な方法でイベントにアクセスすることはできません。
41
+ ` SyntheticEvent ` はプールされます。つまり、` SyntheticEvent ` オブジェクトは再利用され、すべてのプロパティはイベントコールバックが呼び出された後に ` null ` で初期化されます。
42
+ これはパフォーマンス上の理由からです。
43
+ そのため、非同期処理の中でイベントオブジェクトにアクセスすることはできません。
44
+
42
45
43
46
``` javascript
44
47
function onClick (event ) {
45
- console .log (event ); // => 無効なオブジェクト
48
+ console .log (event ); // => null で初期化されるオブジェクト
46
49
console .log (event .type ); // => "click"
47
50
const eventType = event .type ; // => "click"
48
51
@@ -51,7 +54,7 @@ function onClick(event) {
51
54
console .log (eventType); // => "click"
52
55
}, 0 );
53
56
54
- // これは動作しません。this.state.clickEvent はnull値のみを保持します 。
57
+ // これは動作しません。this.state.clickEvent は null 値のみを持つオブジェクトとなります 。
55
58
this .setState ({clickEvent: event });
56
59
57
60
// イベントプロパティをエクスポートすることは可能です。
@@ -61,13 +64,13 @@ function onClick(event) {
61
64
62
65
> 補足
63
66
>
64
- > 非同期処理でイベントのプロパティにアクセスしたい場合は 、` event.persist() ` をイベント内で呼び出す必要があります。これにより、プールから合成イベントが削除され 、イベントへの参照をコードで保持できるようになります。
67
+ > 非同期処理の中でイベントのプロパティにアクセスしたい場合は 、` event.persist() ` をイベント内で呼び出す必要があります。これにより、合成イベントがイベントプールの対象から除外され 、イベントへの参照をコードで保持できるようになります。
65
68
66
69
## サポートするイベント
67
70
68
71
React はイベントを正規化して、異なるブラウザ間で一貫したプロパティが保持されるようにしています。
69
72
70
- 以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます。キャプチャフェーズのイベントハンドラを登録するには、イベント名に ` Capture ` を追加します。たとえば、` onClick ` の代わりに ` onClickCapture ` を使用して、キャプチャフェーズでクリックイベントを処理します 。
73
+ 以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます。キャプチャフェーズのイベントハンドラを登録するには、イベント名に ` Capture ` を追加します。たとえば、キャプチャフェーズでクリックイベントを処理するには ` onClick ` の代わりに ` onClickCapture ` を使用します 。
71
74
72
75
- [ クリップボードイベント] ( #clipboard-events )
73
76
- [ コンポジションイベント] ( #composition-events )
@@ -245,7 +248,7 @@ boolean isPrimary
245
248
246
249
クロスブラウザサポートについての補足:
247
250
248
- すべてのブラウザでポインタイベントがサポートされているわけではありません(この記事の執筆時点でサポートされているブラウザは、Chrome、Firefox、Edge、および Internet Explorer です)。標準に準拠したポリフィルは ` react-dom ` のバンドルサイズを大幅に増加させるため、Reactは意図的に他のブラウザのポリフィルをサポートしません 。
251
+ すべてのブラウザでポインタイベントがサポートされているわけではありません(この記事の執筆時点でサポートされているブラウザは、Chrome、Firefox、Edge、および Internet Explorer です)。標準に準拠したポリフィルは ` react-dom ` のバンドルサイズを大幅に増加させるため、React は意図的にその他ブラウザのためのポリフィルを提供しません 。
249
252
250
253
アプリケーションでポインタイベントが必要な場合は、サードパーティのポインタイベントポリフィルを追加することをお勧めします。
251
254
0 commit comments