Skip to content

Commit c1012b7

Browse files
committed
article.md - 100%
1 parent 1acb305 commit c1012b7

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

2-ui/2-events/02-bubbling-and-capturing/article.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -197,26 +197,26 @@ elem.addEventListener("click", e => alert(2));
197197
```
198198
````
199199
200-
## Summary
200+
## Ringkasan
201201
202-
When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
202+
Pada saat sebuah peristiwa (_event_) terjadi -- elemen yang paling dalam dimana peristiwa itu terjadi akan di tandai dengan label "target elemen" (`event.target`).
203203
204-
- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(..., true)` on the way (`true` is a shorthand for `{capture: true}`).
205-
- Then handlers are called on the target element itself.
206-
- Then the event bubbles up from `event.target` to the root, calling handlers assigned using `on<event>`, HTML attributes and `addEventListener` without the 3rd argument or with the 3rd argument `false/{capture:false}`.
204+
- Kemudian peristiwa akan turun kebawah dari akar dokumen ke `event.target`, memanggil penangan yang di atur dengan `addEventListener(...,true)` (`true` kependekan dari `{capture: true}`).
205+
- Kemudian penangan akan di panggil pada target elemen itu sendiri.
206+
- Kemudian peristiwa akan naik ekatas dari `event.target` ke akar dokumen, memanggil penangan yang di ataur menggunakan `on<event>`, atribut HTML dan `addEventListener` tanpa argumen ke tiga atau dengan `false/{capture:false}.
207207
208-
Each handler can access `event` object properties:
208+
Setiap penangan(_handler_) memiliki akses ke properti objek `event`:
209209
210-
- `event.target` -- the deepest element that originated the event.
211-
- `event.currentTarget` (=`this`) -- the current element that handles the event (the one that has the handler on it)
212-
- `event.eventPhase` -- the current phase (capturing=1, target=2, bubbling=3).
210+
- `event.target` -- elemen paling bawah dimana peristiwa itu terjadi.
211+
- `event.currentTarget` (=`this`) -- merupakan elemen yang menangani peristiwa (elemen yang memiliki penangan (_handler_)).
212+
- `event.eventPhase` -- fase yang sedang terjadi (penangkapan=1, target=2, pengelembungan=3).
213213
214-
Any event handler can stop the event by calling `event.stopPropagation()`, but that's not recommended, because we can't really be sure we won't need it above, maybe for completely different things.
214+
Penangan dapat menghentikan peristiwa dengan memanggil `event.stopPropagation()`, tapi tidak direkomendasikan, karena kita tidak belum tentu tidak memerlukan peristiwa itu pada elemen di atas, mungkin untuk hal yang berbeda.
215215
216-
The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logic behind that.
216+
Fase penangkapan jarang digunakan, biasanya kita menangani peristiwa yang mengelembung. Dan ada logika dibaliknya.
217217
218-
In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.
218+
Pada dunianya, pada saat kecelakaan terjadi, petugas setempat akan bereaksi duluan. Mereka lebih mengetahui daerah dimana kejadian itu terjadi. Kemudian petugas yang bertingkat tinggil jika dibutuhkan.
219219
220-
The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular `<td>` may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last one.
220+
Hal yang sama juga untuk penanganan peristiwa. Kode yang mengatur penangan (_handler_) pada elemen tertentu mengetahui dengan maksimum rincian tentang elemen tersebut dan apa yang harus dilakukan. Sebuah penangan (_handler_) pada `<td>` mungkin lebih cocok untuk `<td>`, penangan itu mengetahui segalanya, jadi penangan itu harus dijalankan duluan. Kemudian elemen yang diatasnya mengetahui tentang konteksnya, mungkin lebih sedikit, dan seterusnya sampai pada elemen yang paling atas, yang mengatur tentang konsep secara umum dan dijalankan paling akhir.
221221
222-
Bubbling and capturing lay the foundation for "event delegation" -- an extremely powerful event handling pattern that we study in the next chapter.
222+
Pengelembungan dan Penangkapan menyediakan sebuah fondasi untuk "event delegation" -- sebuah pola penanganan peristiwa yang cukup penting yang akan kita pelajari pada bab selanjutnya.

0 commit comments

Comments
 (0)