1
1
---
2
2
id : events
3
- title : 合成 (Synthetic) イベント
3
+ title : 合成イベント (SyntheticEvent)
4
4
permalink : docs/events.html
5
5
layout : docs
6
6
category : Reference
7
7
---
8
8
9
- このリファレンスガイドは 、React イベントシステムの一部を構成する ` SyntheticEvent ` ( 合成イベント)ラッパーについて文書化したものです。詳しくは 、[ イベント処理] ( /docs/handling-events.html ) を参照してください 。
9
+ このリファレンスガイドでは 、React の イベントシステムの一部を構成する ` SyntheticEvent ` ( 合成イベント)ラッパについて説明します。詳細については 、[ イベント処理] ( /docs/handling-events.html ) ガイドを参照してください 。
10
10
11
11
## 概要
12
12
13
- イベントハンドラには ` SyntheticEvent ` のインスタンスが渡されます。これはブラウザのネイティブイベントのクロスブラウザラッパーです 。` stopPropagation() ` や ` preventDefault() ` など 、ブラウザのネイティブイベントと同じインターフェイスを持ちます。これらはすべてのブラウザで同じように機能します 。
13
+ あなたの書くイベントハンドラには、 ` SyntheticEvent ` のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです 。` stopPropagation() ` と ` preventDefault() ` を含む 、ブラウザのネイティブイベントと同じインターフェイスを持ちます。この 2つ以外はすべてのブラウザで同じように機能します 。
14
14
15
- 何らかの理由で基本的なブラウザイベントが必要であることがわかった場合は、 ` nativeEvent ` 属性を使用して取得してください 。すべての ` SyntheticEvent ` オブジェクトには以下の属性があります 。
15
+ 何らかの理由で実際のブラウザイベントが必要な場合は、単に ` nativeEvent ` 属性を使用するだけで取得できます 。すべての ` SyntheticEvent ` オブジェクトは以下の属性を持っています 。
16
16
17
17
``` javascript
18
18
boolean bubbles
@@ -33,16 +33,16 @@ 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 ` オブジェクトは再利用され、すべてのプロパティはイベントコールバックが呼び出された後に無効化されます 。これはパフォーマンス上の理由からです。そのため、非同期的な方法でイベントにアクセスすることはできません 。
42
42
43
43
``` javascript
44
44
function onClick (event ) {
45
- console .log (event ); // => nullified object.
45
+ console .log (event ); // => 無効なオブジェクト
46
46
console .log (event .type ); // => "click"
47
47
const eventType = event .type ; // => "click"
48
48
@@ -51,7 +51,7 @@ function onClick(event) {
51
51
console .log (eventType); // => "click"
52
52
}, 0 );
53
53
54
- // これは動作しません。this.state.clickEvent はnullのみを保持します 。
54
+ // これは動作しません。this.state.clickEvent はnull値のみを保持します 。
55
55
this .setState ({clickEvent: event });
56
56
57
57
// イベントプロパティをエクスポートすることは可能です。
@@ -62,14 +62,14 @@ function onClick(event) {
62
62
63
63
> 補足
64
64
>
65
- > 非同期でイベントプロパティにアクセスする場合は、イベントに対して ` event.persist() ` を呼び出す必要があります 。これにより、プールから合成イベントが削除され、イベントへの参照をコードで保持できるようになります。
65
+ > 非同期処理でイベントのプロパティにアクセスしたい場合は、 ` event.persist() ` をイベント内で呼び出す必要があります 。これにより、プールから合成イベントが削除され、イベントへの参照をコードで保持できるようになります。
66
66
67
67
68
- ## サポートされるイベント
68
+ ## サポートするイベント
69
69
70
- React はイベントを正規化して、異なるブラウザ間で一貫したプロパティを持つようにします 。
70
+ React はイベントを正規化して、異なるブラウザ間で一貫したプロパティが保持されるようにしています 。
71
71
72
- 以下のイベントハンドラはバブリングフェーズのイベントによって発生します 。キャプチャフェーズのイベントハンドラを登録するには、イベント名に ` Capture ` を追加します。たとえば、` onClick ` を使用する代わりに、 ` onClickCapture ` を使用してキャプチャフェーズでクリックイベントを処理します 。
72
+ 以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます 。キャプチャフェーズのイベントハンドラを登録するには、イベント名に ` Capture ` を追加します。たとえば、` onClick ` の代わりに ` onClickCapture ` を使用して、キャプチャフェーズでクリックイベントを処理します 。
73
73
74
74
- [ クリップボードイベント] ( #clipboard-events )
75
75
- [ コンポジションイベント] ( #composition-events )
@@ -81,43 +81,43 @@ React はイベントを正規化して、異なるブラウザ間で一貫し
81
81
- [ 選択イベント] ( #selection-events )
82
82
- [ タッチイベント] ( #touch-events )
83
83
- [ UI イベント] ( #ui-events )
84
- - [ Wheel Events ] ( #wheel-events )
85
- - [ Media Events ] ( #media-events )
86
- - [ Image Events ] ( #image-events )
87
- - [ Animation Events ] ( #animation-events )
88
- - [ Transition Events ] ( #transition-events )
89
- - [ Other Events ] ( #other-events )
84
+ - [ ホイールイベント ] ( #wheel-events )
85
+ - [ メディアイベント ] ( #media-events )
86
+ - [ 画像イベント ] ( #image-events )
87
+ - [ アニメーションイベント ] ( #animation-events )
88
+ - [ 遷移イベント ] ( #transition-events )
89
+ - [ その他のイベント ] ( #other-events )
90
90
91
91
92
92
* * *
93
93
94
- ## Reference
94
+ ## リファレンス
95
95
96
- ### Clipboard Events
96
+ ### クリップボードイベント
97
97
98
- Event names:
98
+ イベント名:
99
99
100
100
```
101
101
onCopy onCut onPaste
102
102
```
103
103
104
- Properties:
104
+ プロパティ:
105
105
106
106
``` javascript
107
107
DOMDataTransfer clipboardData
108
108
```
109
109
110
110
* * *
111
111
112
- ### Composition Events
112
+ ### コンポジションイベント
113
113
114
- Event names:
114
+ イベント名:
115
115
116
116
```
117
117
onCompositionEnd onCompositionStart onCompositionUpdate
118
118
```
119
119
120
- Properties:
120
+ プロパティ:
121
121
122
122
``` javascript
123
123
string data
@@ -126,15 +126,15 @@ string data
126
126
127
127
* * *
128
128
129
- ### Keyboard Events
129
+ ### キーボードイベント
130
130
131
- Event names:
131
+ イベント名:
132
132
133
133
```
134
134
onKeyDown onKeyPress onKeyUp
135
135
```
136
136
137
- Properties:
137
+ プロパティ:
138
138
139
139
``` javascript
140
140
boolean altKey
@@ -151,53 +151,53 @@ boolean shiftKey
151
151
number which
152
152
```
153
153
154
- The ` key ` property can take any of the values documented in the [ DOM Level 3 Events spec] ( https://www.w3.org/TR/uievents-key/#named-key-attribute-values ) .
154
+ ` key ` プロパティは [ DOM Level 3 Events spec] ( https://www.w3.org/TR/uievents-key/#named-key-attribute-values ) に記載されている任意の値を取ることができます。
155
155
156
156
* * *
157
157
158
- ### Focus Events
158
+ ### フォーカスイベント
159
159
160
- Event names:
160
+ イベント名:
161
161
162
162
```
163
163
onFocus onBlur
164
164
```
165
165
166
- These focus events work on all elements in the React DOM, not just form elements.
166
+ これらのフォーカスイベントは、フォーム要素だけでなくすべての React DOM 要素で動作します。
167
167
168
- Properties:
168
+ プロパティ:
169
169
170
170
``` javascript
171
171
DOMEventTarget relatedTarget
172
172
```
173
173
174
174
* * *
175
175
176
- ### Form Events
176
+ ### フォームイベント
177
177
178
- Event names:
178
+ イベント名:
179
179
180
180
```
181
181
onChange onInput onInvalid onSubmit
182
182
```
183
183
184
- For more information about the onChange event, see [ Forms] ( /docs/forms.html ) .
184
+ onChange イベントの詳細については、 [ Forms] ( /docs/forms.html ) を参照してください。
185
185
186
186
* * *
187
187
188
- ### Mouse Events
188
+ ### マウスイベント
189
189
190
- Event names:
190
+ イベント名:
191
191
192
192
```
193
193
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
194
194
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
195
195
onMouseMove onMouseOut onMouseOver onMouseUp
196
196
```
197
197
198
- The ` onMouseEnter ` and ` onMouseLeave ` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
198
+ ` onMouseEnter ` と ` onMouseLeave ` イベントは通常のバブリングとは異なり、(ポインタが)出て行った要素から入ってきた要素に伝播し、キャプチャフェーズを持ちません。
199
199
200
- Properties:
200
+ プロパティ:
201
201
202
202
``` javascript
203
203
boolean altKey
@@ -218,20 +218,20 @@ boolean shiftKey
218
218
219
219
* * *
220
220
221
- ### Pointer Events
221
+ ### ポインタイベント
222
222
223
- Event names:
223
+ イベント名:
224
224
225
225
```
226
226
onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
227
227
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
228
228
```
229
229
230
- The ` onPointerEnter ` and ` onPointerLeave ` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
230
+ ` onPointerEnter ` と ` onPointerLeave ` イベントは通常のバブリングとは異なり、(ポインタが)出て行った要素から入ってきた要素に伝播し、キャプチャフェーズを持ちません。
231
231
232
- Properties:
232
+ プロパティ:
233
233
234
- As defined in the [ W3 spec] ( https://www.w3.org/TR/pointerevents/ ) , pointer events extend [ Mouse Events ] ( #mouse-events ) with the following properties:
234
+ [ W3 spec] ( https://www.w3.org/TR/pointerevents/ ) に定義されている通り、ポインタイベントは下記のプロパティを持つマウスイベントの拡張です。
235
235
236
236
``` javascript
237
237
number pointerId
@@ -246,33 +246,33 @@ string pointerType
246
246
boolean isPrimary
247
247
```
248
248
249
- A note on cross-browser support:
249
+ クロスブラウザサポートについての補足:
250
250
251
- Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of ` react-dom ` .
251
+ すべてのブラウザでポインタイベントがサポートされているわけではありません(この記事の執筆時点でサポートされているブラウザは、 Chrome、 Firefox、 Edge、および Internet Explorer です)。標準に準拠したポリフィルは ` react-dom ` のバンドルサイズを大幅に増加させるため、Reactは意図的に他のブラウザのポリフィルをサポートしません。
252
252
253
- If your application requires pointer events, we recommend adding a third party pointer event polyfill.
253
+ アプリケーションでポインタイベントが必要な場合は、サードパーティのポインタイベントポリフィルを追加することをお勧めします。
254
254
255
255
* * *
256
256
257
- ### Selection Events
257
+ ### 選択イベント
258
258
259
- Event names:
259
+ イベント名:
260
260
261
261
```
262
262
onSelect
263
263
```
264
264
265
265
* * *
266
266
267
- ### Touch Events
267
+ ### タッチイベント
268
268
269
- Event names:
269
+ イベント名:
270
270
271
271
```
272
272
onTouchCancel onTouchEnd onTouchMove onTouchStart
273
273
```
274
274
275
- Properties:
275
+ プロパティ:
276
276
277
277
``` javascript
278
278
boolean altKey
@@ -287,15 +287,15 @@ DOMTouchList touches
287
287
288
288
* * *
289
289
290
- ### UI Events
290
+ ### UI イベント
291
291
292
- Event names:
292
+ イベント名:
293
293
294
294
```
295
295
onScroll
296
296
```
297
297
298
- Properties:
298
+ プロパティ:
299
299
300
300
``` javascript
301
301
number detail
@@ -304,15 +304,15 @@ DOMAbstractView view
304
304
305
305
* * *
306
306
307
- ### Wheel Events
307
+ ### ホイールイベント
308
308
309
- Event names:
309
+ イベント名:
310
310
311
311
```
312
312
onWheel
313
313
```
314
314
315
- Properties:
315
+ プロパティ:
316
316
317
317
``` javascript
318
318
number deltaMode
@@ -323,9 +323,9 @@ number deltaZ
323
323
324
324
* * *
325
325
326
- ### Media Events
326
+ ### メディアイベント
327
327
328
- Event names:
328
+ イベント名:
329
329
330
330
```
331
331
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
@@ -336,25 +336,25 @@ onTimeUpdate onVolumeChange onWaiting
336
336
337
337
* * *
338
338
339
- ### Image Events
339
+ ### 画像イベント
340
340
341
- Event names:
341
+ イベント名:
342
342
343
343
```
344
344
onLoad onError
345
345
```
346
346
347
347
* * *
348
348
349
- ### Animation Events
349
+ ### アニメーションイベント
350
350
351
- Event names:
351
+ イベント名:
352
352
353
353
```
354
354
onAnimationStart onAnimationEnd onAnimationIteration
355
355
```
356
356
357
- Properties:
357
+ プロパティ:
358
358
359
359
``` javascript
360
360
string animationName
@@ -364,15 +364,15 @@ float elapsedTime
364
364
365
365
* * *
366
366
367
- ### Transition Events
367
+ ### 遷移イベント
368
368
369
- Event names:
369
+ イベント名:
370
370
371
371
```
372
372
onTransitionEnd
373
373
```
374
374
375
- Properties:
375
+ プロパティ:
376
376
377
377
``` javascript
378
378
string propertyName
@@ -382,9 +382,9 @@ float elapsedTime
382
382
383
383
* * *
384
384
385
- ### Other Events
385
+ ### その他のイベント
386
386
387
- Event names:
387
+ イベント名:
388
388
389
389
```
390
390
onToggle
0 commit comments