You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/reference-events.md
+58-58Lines changed: 58 additions & 58 deletions
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,13 @@ layout: docs
6
6
category: Reference
7
7
---
8
8
9
-
This reference guide documents the `SyntheticEvent`wrapper that forms part of React's Event System. See the [Handling Events](/docs/handling-events.html)guide to learn more.
9
+
Tìa liệu này nhằm giải thích `SyntheticEvent`trong Hệ thống Event của React. Xem [Handling Events](/docs/handling-events.html)để biết thêm chi tiết.
10
10
11
-
## Overview {#overview}
11
+
## Tổng quan {#overview}
12
12
13
-
Your event handlers will be passed instances of `SyntheticEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including `stopPropagation()` and`preventDefault()`, except the events work identically across all browsers.
13
+
Các hàm xử lý sự kiện sẽ được truyền vào một instance của `SyntheticEvent` (một lớp bọc các event để triệt tiêu sự khác nhau về event của các trình duyệt). No có giao diện (interface) tương tự như một event của trình duyệt, bao gồm `stopPropagation()`, và`preventDefault()` và hoạt động giống nhau cho mọi trình duyệt.
14
14
15
-
If you find that you need the underlying browser event for some reason, simply use the `nativeEvent`attribute to get it. Every`SyntheticEvent` object has the following attributes:
15
+
Nếu bạn cần lấy event thật từ trình duyệt vì một lý do nào đó, chỉ cần sử dụng thuộc tính `nativeEvent`là được. Mọi`SyntheticEvent` object đều có những thuộc tính sau:
16
16
17
17
```javascript
18
18
boolean bubbles
@@ -31,19 +31,19 @@ number timeStamp
31
31
string type
32
32
```
33
33
34
-
> Note:
34
+
> Ghi chú:
35
35
>
36
-
> As of v0.14, returning `false`from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()`or`e.preventDefault()`should be triggered manually, as appropriate.
36
+
> Từ bản v0.14, hàm xử lý event trả về `false`sẽ không ngừng sự lan truyền của event đó. `e.stopPropagation()`hoặc`e.preventDefault()`phải được gọi để ngăn event đó đi tiếp.
37
37
38
-
### Event Pooling {#event-pooling}
38
+
### Gộp Event {#event-pooling}
39
39
40
-
The`SyntheticEvent`is pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event callback has been invoked.
41
-
This is for performance reasons.
42
-
As such, you cannot access the event in an asynchronous way.
40
+
Một`SyntheticEvent`sẽ được gộp lại nghĩa là event object sẽ được sử dụng lại và tất cả thuộc tính trong object đó sẽ bị gán null sau khi hàm xử lý event chạy xong.
41
+
Việc làm này nhằm tăng hiệu suất.
42
+
Vì vậy, bạn không thể dùng event object một cách asynchronous. Ví dụ:
43
43
44
44
```javascript
45
45
functiononClick(event) {
46
-
console.log(event); // => nullified object.
46
+
console.log(event); // => object có thuộc tính sẽ bị null sau khi sử dụng.
47
47
console.log(event.type); // => "click"
48
48
consteventType=event.type; // => "click"
49
49
@@ -52,23 +52,23 @@ function onClick(event) {
52
52
console.log(eventType); // => "click"
53
53
}, 0);
54
54
55
-
//Won't work. this.state.clickEvent will only contain null values.
55
+
//Không chạy. this.state.clickEvent sẽ là một object có tất cả thuộc tính null.
56
56
this.setState({clickEvent:event});
57
57
58
-
//You can still export event properties.
58
+
//Bạn vẫn có thể giữ thuộc tính đó do nó là primitive.
59
59
this.setState({eventType:event.type});
60
60
}
61
61
```
62
62
63
-
> Note:
63
+
> Ghi chú:
64
64
>
65
-
> If you want to access the event properties in an asynchronous way, you should call`event.persist()`on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
65
+
> Nếu bạn muốn giữ lại thuộc tính của event sau khi chạy hàm xử lý, bạn phải gọi`event.persist()`để tách event object ra khỏi nhóm gộp và giữ lại các thuộc tính của nó.
66
66
67
-
## Supported Events {#supported-events}
67
+
## Các Events được hỗ trợ {#supported-events}
68
68
69
-
React normalizes events so that they have consistent properties across different browsers.
69
+
React chuẩn hoá các event để chúng hoạt động giống nhau trên các trình duyệt khác nhau.
70
70
71
-
The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase.
71
+
Các hàm xử lý event được thực thi trong lúc event bubble lên. Nếu muốn gán hàm xử lý vào lúc capture xuống của event, thêm hậu tố Capture vào sau tên event, ví dụ `onClickCapture`.
72
72
73
73
-[Clipboard Events](#clipboard-events)
74
74
-[Composition Events](#composition-events)
@@ -85,21 +85,21 @@ The event handlers below are triggered by an event in the bubbling phase. To reg
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).
152
+
Thuộc tính `key`sẽ có những giá trị như trong[DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values).
153
153
154
154
* * *
155
155
156
156
### Focus Events {#focus-events}
157
157
158
-
Event names:
158
+
Tên Event:
159
159
160
160
```
161
161
onFocus onBlur
162
162
```
163
163
164
-
These focus events work on all elements in the React DOM, not just form elements.
164
+
Những event focus sẽ hoạt động trên tất cả React DOM, không chỉ trong form.
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.
196
+
Event`onMouseEnter`và`onMouseLeave`lan ra từ element được rời đi và không có capture.
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.
228
+
Event`onPointerEnter`và`onPointerLeave`lan ra từ element được rời đi và không có capture.
229
229
230
-
Properties:
230
+
Thuộc tính:
231
231
232
-
As defined in the [W3 spec](https://www.w3.org/TR/pointerevents/), pointer events extend [Mouse Events](#mouse-events)with the following properties:
232
+
Như trong [W3 spec](https://www.w3.org/TR/pointerevents/), Pointer events được thêm vào từ [Mouse Events](#mouse-events)và có những thuộc tính sau:
233
233
234
234
```javascript
235
235
number pointerId
@@ -244,17 +244,17 @@ string pointerType
244
244
boolean isPrimary
245
245
```
246
246
247
-
A note on cross-browser support:
247
+
Ghi chú về hỗ trợ trình duyệt
248
248
249
-
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`.
249
+
Pointer events chưa được hỗ trợ trong tất cả trình duyệt (tại thời điểm viết bài này, những trình duyệt được hỗ trợ: Chrome, Firefox, Edge, and Internet Explorer)). React không cố để polyfill cho những trình duyệt khác vì nó sẽ làm `react-dom` anng85 hơn rất nhiều.
250
250
251
-
If your application requires pointer events, we recommend adding a third party pointer event polyfill.
251
+
Nếu bạn cần pointer event, chúng tôi khuyến khích thêm polyfill cho nó.
0 commit comments