Skip to content

Patch untuk events #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 9, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@ Untuk membuat pengulirannya, kita bisa menggeser `<ul>`. Ada banyak cara untuk m

`<div>` luar memiliki lebar tetap, jadi gambar "ekstra" dipotong.

Keseluruhan korsel(_carousel_) adalah "komponen grafis" mandiri pada halaman, jadi sebaiknya kita membungkusnya menjadi satu `<div class="carousel">` dan menata elemen-elemen ke dalamnya.
Keseluruhan carousel adalah "komponen grafis" mandiri pada halaman, jadi sebaiknya kita membungkusnya menjadi satu `<div class="carousel">` dan menata elemen-elemen ke dalamnya.
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@ importance: 4

---

# Korsel (_Carousel_)
# Carousel

Buat sebuah "korsel" --
Create a "carousel" -- pita gambar yang dapat digulir dengan mengklik panah.
Buat sebuah Carousel -- pita gambar yang dapat digulir dengan mengklik panah.

[iframe height=200 src="solution"]

Expand Down
8 changes: 4 additions & 4 deletions 2-ui/2-events/02-bubbling-and-capturing/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Sebuah klik pada bagian dalam `<p>` akan menjalankan `onclick`:

![](event-order-bubbling.svg)

Jadi jika kita klik pada `<p>`, kemudia kita akan melihat 3 buah peringatan (_alerts_): `p` -> `div` -> `form`.
Jadi jika kita klik pada `<p>`, kemudian kita akan melihat 3 buah peringatan (_alerts_): `p` -> `div` -> `form`.

Proses ini disebut dengan "menggelembung (_bubbling_)", karena peristiwa akan "mengelembung (_bubble_)" dari bagian dalam elemen ke atas melalui elemen orang tua (_parents_) seperti sebuah gelembung di air.

Expand Down Expand Up @@ -95,7 +95,7 @@ Contohnya, `body.onclick` tidak akan dijalankan jika kamu mengklik pada `<button
```smart header="event.stopImmediatePropagation()"
Jika sebuah elemen memiliki beberapa penangan (handler) untuk satu peristiwa (event), maka bahkan jika salah satu dari penangan menghentikan proses pengelembungan, penagan yang lain akan tetap di jalankan.

Dengan kata lain, `event.stopPropagation()` menghentinkan proses yang keatas, tapi pada elemen yang sama penangan (handler) lain akan tetap di jalankan.
Dengan kata lain, `event.stopPropagation()` menghentikan proses yang keatas, tapi pada elemen yang sama penangan (handler) lain akan tetap di jalankan.

Untuk menghentukan pengelembungan (handler) dan mencegah penangan (handler) lain yang ada pada elemen tersebut untuk dijalankan, harus menggunakan metode `event.stopImmediatePropagation()`. Setelah itu tidak akan ada penangan (handler) yang dijalankan.
```
Expand All @@ -108,10 +108,10 @@ Terkadang `event.stopPropagation()` akan menyebabkan jebakan tersembunyi yang mu
Contoh:

1. Kita membuat sebuah menu yang bersarang. Pada setiap submenu penangan (_handles_) klik pada elemen itu dan menjalankan `stopPropagation` jadi bagian luar menu tidak akan dijalankan.
2. Kemudian kita memutuskan untuk menangkap klik pada keseluruhan jendela (_window_), untuk melacak kebiasaan pengguna (dimana biasa penggunana mengklik). Beberapa sistem analisa menggunakan metode ini. Biasanya code yang digunakan `document.addEventListener('click'…)` untuk menangkap semua klik.
2. Kemudian kita memutuskan untuk menangkap klik pada keseluruhan jendela (_window_), untuk melacak kebiasaan pengguna (dimana biasa pengguna mengklik). Beberapa sistem analisa menggunakan metode ini. Biasanya code yang digunakan `document.addEventListener('click'…)` untuk menangkap semua klik.
3. Analisis kita tidak akan bekerja pada area dimana kita telah menghentikan peristiwa klik dengan menggunakan `stopPropagation`. Dengan kata lain kita telah membuat daerah mati (_dead zone_).

Biasanya tidak ada keperluan utama yang membuat kita harus menghentikan proses mengelembung. Sebuah fungsi yang kelihatannya membutuhkan penggunaaan metode itu bisa di selesaikan dengan menggunakan cara lain. Salah satunya dengan menggunakan peristiwa khusus, kita akan membahasnya nanti. Dan juka kita dapat menulis data kedalam objek `event` pada sebuah penangan (handler) dan membacanya pada penangan (handler) lainnya, jadi kita dapat meneruskan data tentang proses yang terjadi dibawah ke penangan (handler) elemen atas.
Biasanya tidak ada keperluan utama yang membuat kita harus menghentikan proses mengelembung. Sebuah fungsi yang kelihatannya membutuhkan penggunaan metode itu bisa di selesaikan dengan menggunakan cara lain. Salah satunya dengan menggunakan peristiwa khusus, kita akan membahasnya nanti. Dan juga kita dapat menulis data kedalam objek `event` pada sebuah penangan (handler) dan membacanya pada penangan (handler) lainnya, jadi kita dapat meneruskan data tentang proses yang terjadi dibawah ke penangan (handler) elemen atas.
```


Expand Down
1 change: 1 addition & 0 deletions glossary.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ Browser | Peramban | _Browser_
Inggris | Indonesia | Gunakan
------- | --------- | -------
Code | Kode | Kode
Carousel| Korsel | Carousel


## E
Expand Down
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy