Penggabungan Acara dan Pengambilan Acara Dalam JavaScript: Yang perlu anda ketahui

Event Bubbling dan Event Capturing adalah istilah yang paling banyak digunakan dalam JavaScript pada saat aliran acara. Ini adalah dua cara penyebaran peristiwa dalam API DOM HTML. Artikel ini mengenai Event Bubbling dan Event Capturing dalam JavaScript akan menerangkan secara terperinci mengapa kami memerlukannya mengikut urutan berikut:

• • • Apa itu Event Bubbling dalam JavaScript?
    • Apakah Penyebaran Acara?
    • Apa itu Rakaman Acara?
    • Penggunaan Event Bubbling dan Event Capturing dalam JavaScript
    • Prosedur Kerja

Apa itu Event Bubbling dalam JavaScript?

Event Bubbling adalah istilah yang mesti dijumpai orang semasa mengembangkan aplikasi web atau laman web menggunakan . Pada dasarnya, Event Bubbling adalah teknik di mana pengendali acara dipanggil ketika satu item bersarang ke item lain dan mesti dari acara yang sama. Ia serupa dengan Encapsulation.

Event Bubbling hanyalah sebahagian kecil dari pengendalian acara dalam JavaScript. Untuk memahaminya dengan lebih baik, kita harus mengetahui mengenai Event Propagation dan bagaimana ia menyokong Event Bubbling.

Apakah Penyebaran Acara?

Penyebaran Acara dapat dibandingkan dengan istilah induk dengan peristiwa menggelegak dan menangkap sebagai anaknya.Ia dinyatakan seperti berikut:

Sekiranya anda mengklik pada gambar mana pun maka ia bukan sahaja menghasilkan peristiwa klik tetapi diteruskan kepada ibu bapa 'a' dan datuk 'li'. Dengan cara ini penyebaran fungsi berlaku. Di sini gambar dianggap sebagai anak dan ia adalah sasaran peristiwa di mana klik dihasilkan. Gambar bersama nenek moyangnya bersama membentuk cabang dalam terminologi pokok. Cabang itu penting kerana kita mengetahui jalan di mana peristiwa itu menyebarkan.

Setiap pendengar dipanggil dengan objek acara masing-masing yang mengumpulkan maklumat mengenai acara tersebut. Penyebaran ini sangat penting kerana kita mengetahui proses memanggil semua pendengar untuk acara yang diberikan. Dari gambar di atas kita dapat melihat bahawa penentuan cabang adalah statik. Sebarang pengubahsuaian pokok yang berlaku semasa acara tidak diendahkan. Di sini penyebarannya adalah dua arah iaitu ia pergi dari tingkap ke sasaran acara dan kembali. Di sini penyebaran secara umum dikategorikan kepada tiga jenis utama. Mereka adalah:

rentetan hingga penukaran tarikh di java

1. Fasa Tangkapan: Pergi dari tingkap ke fasa sasaran acara.
2. Fasa Sasaran: Ini adalah fasa sasaran.
3. Fasa Gelembung: Dari ibu bapa sasaran acara kembali ke tetingkap.

Apa itu Rakaman Acara?

Pada fasa ini, pendengar penangkap dipanggil yang nilainya telah didaftarkan sebagai 'benar'. Ia ditulis sebagai:

el.addEventListener ('klik', pendengar, benar)

Di sini nilai pendengar telah didaftarkan menjadi 'benar' sehingga acara ini ditangkap. Sekiranya tidak ada nilai maka nilai secara lalai adalah palsu dan acara itu tidak akan ditangkap. Oleh itu, dalam fasa ini peristiwa yang nilainya benar hanya menemui jalan keluar dari tingkap dan dipanggil dan ditangkap.

Kemudian dalam fasa sasaran acara, semua pendengar yang didaftarkan dipanggil tanpa mengira status bendera mereka yang benar atau salah.

Penggunaan Event Bubbling dan Event Capturing dalam JavaScript

Dalam fasa Bubbling, hanya orang yang tidak menangkap yang dipanggil, itu adalah peristiwa yang memiliki nilai bendera sebagai 'palsu'. Acara menggelegak dan Menangkap Acara sangat berguna dan penting dalam terminologi DOM (Model Objek Dokumen).

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

Sebilangan kod di atas menunjukkan tahap fasa menggelegak dan menangkap. Tidak semua acara masuk ke sasaran acara. Sebilangan dari mereka tidak akan tergelincir. Perjalanan mereka berhenti selepas fasa sasaran. Aliran fasa tiga peristiwa digambarkan dalam rajah berikut:

apakah kekangan dalam sql

Penggabungan acara tidak berfungsi dalam semua jenis acara, bagaimanapun, pendengar mesti mempunyai '. Gelembung 'Harta boolean objek acara. Beberapa sifat lain termasuk:

1. e.target: yang merujuk kepada sasaran peristiwa.
2. e.currentTarget: ia adalah mod di mana pendengar semasa didaftarkan. Di sini nilainya dirujuk dengan menggunakan ini kata kunci.
3. e.eventFasa: Ia adalah bilangan bulat yang merujuk kepada tiga kata kunci lain seperti Menangkap_phase, Bubbling_phase, AT_Target fasa.

Prosedur Kerja

Mari kita perhatikan lebih terperinci dalam gambaran di atas. Mari kita klik elemen 'buttonOne' dan kemudian segera acara akan dicetuskan. Lazimnya suatu peristiwa memulakan perjalanannya dari akar yang merupakan elemen paling tinggi dari pokok. Kemudian berjalan mengikuti pohon itu peristiwa sasaran iaitu 'buttonOne'. Inilah cara perjalanannya:

Seperti yang ditunjukkan dalam gambar, acara ini berjalan melalui terminologi DOM yang sampai ke acara sasaran pada akhirnya. Sekarang apabila acara itu mencapai sasarannya tidak akan berakhir. Ini berterusan dan berterusan dalam terminologi DOM seperti yang digambarkan dalam gambar di bawah.

tutorial studio android untuk pemula

Sama seperti sebelumnya, setiap elemen di sepanjang jalan acara ketika bergerak ke atas mendapat pemberitahuan mengenai keberadaannya. Semasa berjalan seperti ini, anda mesti berfikir sama ada kita boleh menghentikan prosesnya atau tidak. Baiklah, jawapan untuk soalan tersebut adalah Ya, kita dapat menghentikan penyebaran acara tersebut. Ini dilakukan dengan menggunakan 'BerhentiPropagasi' kaedah objek peristiwa.

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

Dengan menggunakan kata kunci, kita dapat menghentikan penyebaran. Ia berfungsi seperti ini, ketika kita menerapkan kata kunci “ berhentiPropagasi ” maka semua peristiwa di bawah acara utama tidak dipanggil dan oleh itu tidak akan dipanggil seperti yang disebutkan dalam potongan kod di atas. Terdapat kata kunci lain yang dikenali sebagai “ stopImmediatePropagation ”. Seperti namanya ia segera menghentikan prosiding adik-beradik itu.

Dengan ini, kami telah sampai ke akhir artikel kami. Saya harap anda memahami apa itu Event Bubbling dan Event Capturing dalam JavaScript.

Sekarang setelah anda mengetahui tentang Event Bubbling dan Event Capturing dalam JavaScript, lihat oleh Edureka. Latihan Pensijilan Pembangunan Web akan membantu anda Mempelajari cara membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).

Ada soalan untuk kami? Sila sebutkan di bahagian komen 'Event Bubbling and Event Capturing in JavaScript' dan kami akan menghubungi anda.