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: 2-ui/2-events/02-bubbling-and-capturing/article.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -197,26 +197,26 @@ elem.addEventListener("click", e => alert(2));
197
197
```
198
198
````
199
199
200
-
## Summary
200
+
## Ringkasan
201
201
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`).
203
203
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}.
207
207
208
-
Each handler can access `event` object properties:
208
+
Setiap penangan(_handler_) memiliki akses ke properti objek `event`:
209
209
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).
213
213
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.
215
215
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.
217
217
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.
219
219
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.
221
221
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