docs: translate 1-5: events

Author: sorae42

content/tutorial/01-svelte/05-events/01-dom-events/README.md

@@ -1,12 +1,12 @@
 ---
-title: DOM events
+title: Sự kiện DOM
 ---
 
-As we've briefly seen already, you can listen to any DOM event on an element (such as click or [pointermove](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event)) with the `on:` directive:
+Như bạn đã thấy, bạn có thể lắng nghe bất kì sự kiện DOM nào trên một phần tử (chẳng hạn như một click chuột hoặc [pointermove](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event)) với `on:`:
 
 ```svelte
 /// file: App.svelte
 <div +++on:pointermove={handleMove}+++>
-	The pointer is at {m.x} x {m.y}
+	Con trỏ chuột đang ở {m.x} x {m.y}
 </div>
 ```

content/tutorial/01-svelte/05-events/01-dom-events/app-a/src/lib/App.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div>
-	The pointer is at {m.x} x {m.y}
+	Con trỏ chuột đang ở {m.x} x {m.y}
 </div>
 
 <style>

content/tutorial/01-svelte/05-events/01-dom-events/app-b/src/lib/App.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div on:pointermove={handleMove}>
-	The pointer is at {m.x} x {m.y}
+	Con trỏ chuột đang ở {m.x} x {m.y}
 </div>
 
 <style>

content/tutorial/01-svelte/05-events/02-inline-handlers/README.md

@@ -2,7 +2,7 @@
 title: Inline handlers
 ---
 
-You can also declare event handlers inline:
+Bạn cũng có thể khai báo event handler trong cùng một dòng _(inline event handlers)_:
 
 ```svelte
 /// file: App.svelte
@@ -20,8 +20,8 @@ You can also declare event handlers inline:
 		m = { x: e.clientX, y: e.clientY };
 	}+++}
 >
-	The mouse position is {m.x} x {m.y}
+	Con trỏ chuột đang ở {m.x} x {m.y}
 </div>
 ```
 
-> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.
+> Trong một số framework thường hay có đề xuất nên tránh inline event handler để có hiệu năng tốt nhất, thường là trong các vòng lặp. Lời khuyên đó thì lại không áp dụng cho Svelte - bất kể bạn chọn cách nào, trình dịch sẽ luôn làm điều đúng đắn nhất.

content/tutorial/01-svelte/05-events/02-inline-handlers/app-b/src/lib/App.svelte

@@ -7,7 +7,7 @@
 		m = { x: e.clientX, y: e.clientY };
 	}}
 >
-	The pointer is at {m.x} x {m.y}
+	Con trỏ chuột đang ở {m.x} x {m.y}
 </div>
 
 <style>

content/tutorial/01-svelte/05-events/03-event-modifiers/README.md

@@ -1,25 +1,25 @@
 ---
-title: Event modifiers
+title: Modifier trong sự kiện
 ---
 
-DOM event handlers can have _modifiers_ that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
+DOM event handler có thể có _modifier_ để thay đổi hành vi của nó. Chẳng hạn như một handler với modifier `once` sẽ làm cho nó chạy đúng _một lần_:
 
 ```svelte
 /// file: App.svelte
-<button on:click+++|once+++={() => alert('clicked')}>
-	Click me
+<button on:click+++|once+++={() => alert('đã bấm')}>
+	Bấm vào tôi
 </button>
 ```
 
-The full list of modifiers:
+Dưới đây là đầy đủ danh sách các modifier:
 
-- `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
-- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
-- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
-- `nonpassive` — explicitly set `passive: false`
-- `capture` — fires the handler during the [_capture_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_capture) phase instead of the [_bubbling_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling) phase
-- `once` — remove the handler after the first time it runs
-- `self` — only trigger handler if event.target is the element itself
-- `trusted` — only trigger handler if `event.isTrusted` is `true`, meaning the event was triggered by a user action rather than because some JavaScript called `element.dispatchEvent(...)`
+- `preventDefault` — gọi `event.preventDefault()` trước khi chạy handler. Hữu ích cho việc xử lý form.
+- `stopPropagation` — gọi `event.stopPropagation()`, tránh sự kiện với tới phần tử kế tiếp.
+- `passive` - tăng hiệu năng cho việc cuộn trang trên các sự kiện chạm/lăn chuột (Svelte sẽ tự động thêm khi chỗ đó có thể thêm được).
+- `nonpassive` — buộc đặt `passive: false`.
+- `capture` - chạy handler trong giai đoạn [_capture_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_capture) thay vì giai đoạn [_bubbling_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling).
+- `once` — bỏ kích hoạt handler sau khi chạy lần đầu tiên.
+- `self` — chỉ chạy handler khi `event.target` là phần tử chính nó.
+- `trusted` - chỉ chạy handler khi `event.isTrusted` là `true`, tức là sự kiện chỉ có thể kích hoạt bởi thao tác từ người dùng thay vì được gọi từ JavaScript bằng `element.dispatchEvent(...)`.
 
-You can chain modifiers together, e.g. `on:click|once|capture={...}`.
+Bạn có thể chồng các modifier lên, ví dụ như `on:click|once|capture={...}`.

content/tutorial/01-svelte/05-events/03-event-modifiers/app-a/src/lib/App.svelte

@@ -1,3 +1,3 @@
-<button on:click={() => alert('clicked')}>
-	Click me
+<button on:click={() => alert('đã bấm')}>
+	Bấm vào tôi
 </button>

content/tutorial/01-svelte/05-events/03-event-modifiers/app-b/src/lib/App.svelte

@@ -1,3 +1,3 @@
-<button on:click|once={() => alert('clicked')}>
-	Click me
+<button on:click|once={() => alert('đã bấm')}>
+	Bấm vào tôi
 </button>

content/tutorial/01-svelte/05-events/04-component-events/README.md

@@ -1,8 +1,8 @@
 ---
-title: Component events
+title: Sự kiện trong component
 ---
 
-Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`:
+Component cũng có thể phái _(dispatch)_ các sự kiện. Bạn cần phải tạo một _event dispatcher_ để có thể làm điều này.
 
 ```svelte
 /// file: Inner.svelte
@@ -13,19 +13,19 @@ Components can also dispatch events. To do so, they must create an event dispatc
 
 	function sayHello() {
 		dispatch('message', {
-			text: 'Hello!'
+			text: 'Xin chào!'
 		});
 	}
 </script>
 ```
 
-> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance.
+> Bạn phải gọi `createEventDispatcher` khi component được khởi tạo lần đầu - bạn không thể chúng gọi sau này, chẳng hạn như trong callback của `setTimeout`. Việc này sẽ liên kết `dispatch` với instance của component.
 
-Then, add an `on:message` handler in `App.svelte`:
+Sau đó, thêm handler `on:message` vào `App.svelte`:
 
 ```svelte
 /// file: App.svelte
 <Inner +++on:message={handleMessage}+++ />
 ```
 
-> You can also try changing the event name to something else. For instance, change `dispatch('message', {...})` to `dispatch('greet', {...})` in `Inner.svelte` and change the attribute name from `on:message` to `on:greet` in `App.svelte`.
+> Bạn cũng có thể thay đổi tên sự kiện thành thứ khác. Chẳng hạn như thay đổi `dispatch('message', {...})` thành `dispatch('greet', {...})` trong `Inner.svelte` và thay đổi tên attribute từ `on:message` thành `on:greet` trong `App.svelte`.

content/tutorial/01-svelte/05-events/04-component-events/app-a/src/lib/Inner.svelte

@@ -1,11 +1,11 @@
 <script>
 	function sayHello() {
 		dispatch('message', {
-			text: 'Hello!'
+			text: 'Xin chào!'
 		});
 	}
 </script>
 
 <button on:click={sayHello}>
-	Click to say hello
+	Bấm để nói Xin chào
 </button>

content/tutorial/01-svelte/05-events/04-component-events/app-b/src/lib/Inner.svelte

@@ -5,11 +5,11 @@
 
 	function sayHello() {
 		dispatch('message', {
-			text: 'Hello!'
+			text: 'Xin chào!'
 		});
 	}
 </script>
 
 <button on:click={sayHello}>
-	Click to say hello
+	Bấm để nói Xin chào
 </button>

content/tutorial/01-svelte/05-events/05-event-forwarding/README.md

@@ -2,11 +2,12 @@
 title: Event forwarding
 ---
 
-Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event.
+<!-- FIXME: Need link for "bubble" -->
+Không như DOM event, component events không _bubble_. Nếu bạn muốn lắng nghe một sự kiện trên component được lồng sâu bên trong, component trung gian đó phải đẩy _(forward)_ sự kiện đó.
 
-In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
+Trong trường hợp này, chúng ta có `App.svelte` và `Inner.svelte` trong [phần trước](/tutorial/component-events), và bây giờ ta có component `Outer.svelte` bao gồm `<Inner/>`.
 
-One way we _could_ solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
+Một cách mà ta _có thể_ giải là thêm `createEventDispatcher` vào `Outer.svelte`, _nghe_ sự kiện `message`, và tạo một handler cho nó:
 
 ```svelte
 /// file: Outer.svelte
@@ -24,7 +25,7 @@ One way we _could_ solve the problem is adding `createEventDispatcher` to `Outer
 <Inner on:message={forward}/>
 ```
 
-But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
+Nhưng bạn phải viết khá nhiều code cho việc này, cho nên Svelte có một cách viết tắt - một event `on:message` mà không có giá trị thì nó có nghĩa là "forward tất cả sự kiện có tên `message`".
 
 ```svelte
 /// file: Outer.svelte

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md

@@ -2,9 +2,9 @@
 title: DOM event forwarding
 ---
 
-Event forwarding works for DOM events too.
+Bạn cũng có thể forward sự kiện cho DOM event luôn.
 
-We want to get notified of clicks on our `<BigRedButton>` — to do that, we just need to forward `click` events on the `<button>` element in `BigRedButton.svelte`:
+Để được thông báo khi bấm nút `<BigRedButton>` - ta chỉ cần forward sự kiện `click` trên phần tử `<button>` ở trong `BigRedButton.svelte`:
 
 ```svelte
 /// file: BigRedButton.svelte

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-a/src/lib/BigRedButton.svelte

@@ -1,5 +1,5 @@
 <button>
-	Push
+	Bấm
 </button>
 
 <style>

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-b/src/lib/BigRedButton.svelte

@@ -1,5 +1,5 @@
 <button on:click>
-	Push
+	Bấm
 </button>
 
 <style>

content/tutorial/01-svelte/05-events/meta.json

@@ -1,5 +1,5 @@
 {
-	"title": "Events",
+	"title": "Sự kiện",
 	"scope": {
 		"prefix": "/src/lib/",
 		"name": "src"