137. How Events Work in React Flashcards
Apa itu event dalam konteks pemrograman web?
Event adalah peristiwa yang terjadi sebagai hasil dari interaksi pengguna atau aktivitas lain di dalam browser, seperti klik tombol, input teks, hover mouse, atau scroll. Setiap event dapat dipantau dan direspon dengan menggunakan event listener dan handler.
Apa itu Event Listener?
Event Listener adalah fungsi yang ditetapkan untuk mendengarkan event tertentu pada elemen. Ketika event tersebut terjadi, listener akan menjalankan fungsi yang ditugaskan. Ini memungkinkan kita untuk merespon interaksi pengguna.
Apa itu Event Handler?
Event Handler adalah fungsi yang diaktifkan ketika event yang didengarkan terjadi. Misalnya, jika ada event klik pada tombol, event handler akan menjalankan logika tertentu, seperti menampilkan pesan atau mengubah tampilan halaman.
Apa itu Event Bubbling?
Event Bubbling adalah proses di mana event yang terjadi pada elemen target (misalnya, tombol) akan menggelembung ke atas melalui semua elemen induk (parent) hingga mencapai elemen paling atas (root). Selama fase ini, event listener di elemen induk juga akan dieksekusi.
Apa yang terjadi saat tombol diklik dalam konteks event bubbling?
Ketika tombol diklik, event listener di tombol (child) akan dipanggil terlebih dahulu. Kemudian, event tersebut akan menggelembung ke elemen induk (parent), di mana event listener di elemen induk juga akan dieksekusi. Ini berarti jika kita memiliki listener di kedua elemen, keduanya akan dijalankan.
Apa itu Event Delegation dan bagaimana cara kerjanya?
Event Delegation adalah teknik yang memungkinkan kita menangani event untuk banyak elemen dari satu tempat sentral, yaitu elemen induk. Alih-alih menambahkan listener ke setiap elemen anak, kita menambahkan satu listener pada elemen induk. Ketika event terjadi, kita dapat menggunakan properti target dari event untuk menentukan elemen mana yang sebenarnya diklik.
Mengapa event delegation jarang digunakan di React?
Dalam React, kita cenderung menggunakan komponen yang memiliki state dan props. Meskipun event delegation memungkinkan penanganan yang efisien, React sudah menangani event secara otomatis dengan baik, sehingga tidak perlu banyak menggunakan teknik ini. Namun, pemahaman tentang event bubbling dan delegation masih penting untuk mengatasi perilaku yang aneh dan untuk memahami cara kerja React di balik layar.
Bagaimana React menangani event di belakang layar?
Di React, ketika kita menggunakan prop seperti onClick, React tidak menambahkan listener langsung ke elemen target. Sebaliknya, React mendaftar semua handler event di root DOM container aplikasi. Ini berarti bahwa React secara otomatis menerapkan event delegation dengan menambahkan satu listener per tipe event pada elemen root.
Apa itu Synthetic Event di React?
Synthetic Event adalah pembungkus yang disediakan oleh React untuk objek event native dari DOM. Synthetic Event memiliki antarmuka yang mirip dengan objek event native tetapi memperbaiki inkonsistensi antara browser. Ini membuat event bekerja dengan cara yang sama di semua browser.
Apa yang perlu diperhatikan tentang metode stopPropagation()?
Metode stopPropagation() dapat digunakan untuk menghentikan bubbling dari event. Dengan memanggil metode ini, event tidak akan melanjutkan ke elemen induk. Namun, penggunaannya sangat jarang dan sebaiknya hanya dilakukan jika tidak ada solusi lain.
Apa perbedaan dalam penamaan event handler di React dibandingkan dengan JavaScript murni?
Di React, nama prop untuk menambahkan event handler menggunakan camelCase, misalnya onClick. Di HTML, ini ditulis sebagai onclick (semua huruf kecil), dan jika menggunakan addEventListener dalam JavaScript murni, kita hanya menggunakan nama event seperti click.
Bagaimana cara mencegah perilaku default dari event dalam React?
Untuk mencegah perilaku default dari browser ketika sebuah event terjadi, kita harus memanggil metode preventDefault() pada objek event di dalam event handler. Contohnya adalah saat ingin mencegah form melakukan reload halaman saat dikirim.
Kapan kita perlu menggunakan event capturing di React?
Meskipun jarang digunakan, jika kita perlu menangani event pada fase capturing (sebelum event mencapai elemen target), kita bisa menggunakan onClickCapture alih-alih onClick. Namun, sebagian besar kasus tidak memerlukan penggunaan ini.
Mengapa penting memahami bagaimana event bekerja di React?
Memahami cara kerja event dalam React membantu kita mengatasi perilaku aneh yang mungkin terjadi dalam aplikasi kita dan memberikan kepercayaan diri dalam menangani interaksi pengguna dengan cara yang lebih efektif.
