Gelembung Acara dan Penangkapan Acara Dalam JavaScript: Semua yang perlu Anda ketahui

Gelembung Peristiwa dan Penangkapan Peristiwa adalah istilah yang paling banyak digunakan di JavaScript pada saat aliran peristiwa. Ini adalah dua cara penyebaran peristiwa di API DOM HTML. Artikel tentang Gelembung Peristiwa dan Pengambilan Peristiwa di JavaScript ini akan menjelaskan secara detail mengapa kami memerlukannya di dalam urutan berikut:

• • • Apa itu Gelembung Acara di JavaScript?
    • Apa itu Propagasi Peristiwa?
    • Apa itu Event Capturing?
    • Penggunaan Event Bubbling dan Event Capturing di JavaScript
    • Tata Kerja

Apa itu Gelembung Acara di JavaScript?

Event Bubbling adalah istilah yang harus ditemui orang saat mengembangkan aplikasi web atau menggunakan halaman web . Pada dasarnya, Event Bubbling adalah teknik di mana penangan acara dipanggil ketika satu item bertumpuk ke item lain dan harus dari acara yang sama. Ini mirip dengan Enkapsulasi.

Gelembung Acara hanyalah sebagian kecil dari penanganan acara di JavaScript. Untuk memahaminya lebih baik kita harus tahu tentang Propagasi Peristiwa dan bagaimana ia mendukung Gelembung Peristiwa.

Apa itu Propagasi Peristiwa?

Propagasi Peristiwa dapat dibandingkan sebagai istilah induk dengan peristiwa menggelegak dan menangkap sebagai anaknya.Itu direpresentasikan sebagai berikut:

python def __init__

Jika Anda mengklik gambar apa pun maka itu tidak hanya akan menghasilkan peristiwa klik tetapi juga berlanjut ke induk 'a' dan kakek 'li'. Dengan cara ini penyebaran fungsi berlangsung. Di sini gambar dianggap sebagai anak dan itu adalah target acara tempat klik dibuat. Gambar bersama dengan leluhurnya bersama-sama membentuk cabang dalam terminologi pohon. Cabang ini penting karena kita mengetahui jalur penyebaran peristiwa.

Setiap pendengar dipanggil dengan objek acara masing-masing yang mengumpulkan informasi tentang acara tersebut. Propagasi ini sangat penting karena kami mengetahui proses memanggil semua pendengar untuk acara tertentu. Dari gambar di atas kita dapat melihat bahwa penentuan cabang bersifat statis. Modifikasi pohon apa pun yang terjadi selama acara diabaikan. Di sini propagasi adalah dua arah yang bergerak dari jendela ke target acara dan kembali. Di sini perbanyakan secara luas dikategorikan menjadi tiga jenis utama. Yaitu:

1. Fase Pengambilan: Beralih dari jendela ke fase target acara.
2. Fase Target: Ini adalah fase target.
3. Fase Gelembung: Dari acara induk target kembali ke jendela.

Apa itu Event Capturing?

Dalam fase ini, pendengar capturer dipanggil yang nilainya telah terdaftar sebagai 'benar'. Itu Ditulis sebagai:

el.addEventListener ('click', listener, true)

Di sini nilai pendengar telah didaftarkan menjadi 'true' sehingga peristiwa ini direkam. Jika tidak ada nilai maka nilai secara default salah dan acara tidak akan ditangkap. Jadi dalam fase ini peristiwa yang nilainya benar hanya menemukan jalan mereka dari jendela dan dipanggil dan ditangkap.

Kemudian di fase target acara, semua pendengar yang terdaftar dipanggil terlepas dari status benderanya yang benar atau salah.

apa __init__

Penggunaan Event Bubbling dan Event Capturing di JavaScript

Pada fase Bubbling hanya non-capturer yang dipanggil, yaitu kejadian yang memiliki nilai flag sebagai “false”. Event menggelegak dan Event Capturing sangat berguna dan penting dalam terminologi DOM (Document Object Model).

el.addEventListener ('click', listener, false) // listener tidak menangkap el.addEventListener ('click', listener) // listener tidak merekam

Potongan kode di atas menunjukkan cara kerja fase menggelegak dan menangkap. Tidak semua acara sesuai dengan target acara. Beberapa dari mereka tidak meluap. Perjalanan mereka berhenti setelah fase target. Aliran tiga fase peristiwa diilustrasikan dalam diagram berikut:

Acara menggelegak tidak berfungsi di semua jenis acara, namun pendengar harus memilikinya '.gelembung Properti Boolean dari objek acara. Beberapa properti lainnya meliputi:

1. e.target: yang mereferensikan target acara.
2. e.currentTarget: itu adalah mode di mana pendengar saat ini terdaftar. Di sini nilai direferensikan dengan menggunakan ini kata kunci.
3. e.eventPhase: Ini adalah bilangan bulat yang mengacu pada tiga kata kunci lainnya seperti Capturing_phase, Bubbling_phase, AT_Target tahap.

Tata Kerja

Mari kita lihat lebih dekat ilustrasi di atas. Mari kita klik elemen 'buttonOne' dan kemudian segera sebuah peristiwa akan dipicu. Biasanya sebuah peristiwa memulai perjalanannya dari akar yang merupakan elemen paling atas dari pohon. Kemudian ia mengikuti pohon acara target yaitu 'buttonOne'. Berikut cara perjalanannya:

Seperti yang ditunjukkan pada gambar, peristiwa tersebut berhasil melewati terminologi DOM yang pada akhirnya mencapai peristiwa target. Sekarang, begitu acara mencapai targetnya, itu tidak akan berakhir. Ini terus berlanjut dalam terminologi DOM seperti yang diilustrasikan pada gambar di bawah ini.

Sama seperti sebelumnya, setiap elemen di sepanjang jalur peristiwa saat bergerak ke atas akan diberi tahu tentang keberadaannya. Seiring berjalannya waktu, Anda pasti berpikir apakah kami dapat menghentikan proses atau tidak. Nah, jawaban atas pertanyaannya adalah Ya, kita bisa menghentikan penyebaran acara tersebut. Ini dilakukan dengan memanggil “StopPropagation” metode objek acara.

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))

Dengan menerapkan kata kunci kami dapat menghentikan propagasi. Ini berfungsi seperti ini, ketika kami menerapkan kata kunci ' stopPropagation ” maka semua peristiwa di bawah peristiwa utama tidak dipanggil dan karenanya tidak akan dipanggil seperti yang disebutkan dalam bagian kode di atas. Ada kata kunci lain yang dikenal sebagai ' stopImmediatePropagation ”. Seperti namanya, itu segera menghentikan proses saudara kandung.

adalah master gelar pascasarjana

Dengan ini, kita sampai pada akhir artikel kita. Saya harap Anda mengerti apa itu Gelembung Acara dan Penangkapan Acara di JavaScript.

Sekarang setelah Anda mengetahui tentang Gelembung Peristiwa dan Pengambilan Peristiwa di JavaScript, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar 'Gelembung Acara dan Penangkapan Acara di JavaScript' dan kami akan menghubungi Anda kembali.