Acara menggelegak di JavaScript? Penyebaran acara dijelaskan

Takeaways Key

Acara yang menggelegak di JavaScript merujuk kepada perintah di mana pengendali acara dipanggil apabila satu elemen bersarang di dalam elemen kedua, dan kedua -dua elemen telah mendaftarkan pendengar untuk acara yang sama. Memahami acara menggelegak, bersama -sama dengan penangkapan acara dan penyebaran acara, adalah penting untuk bekerja dengan peristiwa di JavaScript.
Penyebaran acara adalah istilah untuk kedua -dua acara menggelegak dan penangkapan acara. Ia merujuk kepada proses memanggil semua pendengar untuk jenis acara yang diberikan, yang dilampirkan pada nod di cawangan Dom Tree. Penyebaran adalah bidirectional dan boleh dibahagikan kepada tiga fasa: fasa penangkapan, fasa sasaran, dan fasa gelembung.
Penyebaran acara boleh dihentikan di mana -mana pendengar dengan menggunakan kaedah stoppropagation objek acara. Ini menghentikan penyebaran, yang bermaksud bahawa semua pendengar yang didaftarkan pada nod pada laluan penyebaran yang mengikuti sasaran semasa tidak akan dipanggil.
Beberapa peristiwa dikaitkan dengan tindakan lalai yang dilaksanakan oleh pelayar pada akhir penyebaran. Tindakan lalai ini boleh dielakkan dengan pembatalan acara, dengan memanggil kaedah pencegahanDefault dalam pendengar.

Bubbling acara adalah istilah yang mungkin anda jumpai pada perjalanan JavaScript anda. Ia berkaitan dengan urutan di mana pengendali acara dipanggil apabila satu elemen bersarang di dalam elemen kedua, dan kedua -dua elemen telah mendaftarkan pendengar untuk acara yang sama (satu klik, contohnya).

Tetapi peristiwa menggelegak hanya satu keping teka -teki. Ia sering disebut bersama dengan penangkapan acara dan penyebaran acara. Dan pemahaman yang kukuh tentang ketiga -tiga konsep adalah penting untuk bekerja dengan peristiwa di JavaScript - contohnya jika anda ingin melaksanakan corak delegasi acara.

Dalam jawatan ini saya akan menerangkan setiap istilah ini dan menunjukkan bagaimana mereka sesuai bersama. Saya juga akan menunjukkan kepada anda bagaimana pemahaman asas mengenai aliran acara JavaScript dapat memberi anda kawalan halus ke atas permohonan anda. Sila ambil perhatian bahawa ini bukan primer pada peristiwa, oleh itu kebiasaan dengan topik itu diandaikan. Jika anda ingin mengetahui lebih lanjut mengenai peristiwa secara umum, mengapa tidak menyemak buku kami: JavaScript: Novice to Ninja.

Apakah penyebaran acara?

mari kita mulakan dengan penyebaran acara. Ini adalah istilah selimut untuk kedua -dua acara menggelegak dan penangkapan acara. Pertimbangkan markup biasa untuk membina senarai imej yang dipautkan, untuk galeri kecil misalnya:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Klik pada imej tidak hanya menjana acara klik untuk elemen IMG yang sepadan, tetapi juga untuk ibu bapa A, untuk datuk li dan sebagainya, pergi sepanjang jalan melalui semua nenek moyang unsur, sebelum menamatkan di objek tetingkap.

Dalam terminologi DOM, imej adalah sasaran acara , elemen paling dalam di mana klik itu berasal. Sasaran peristiwa, ditambah dengan nenek moyangnya, dari ibu bapanya ke objek tingkap, membentuk cawangan di Dom Tree. Sebagai contoh, di galeri imej, cawangan ini akan terdiri daripada nod: IMG, A, LI, UL, BODY, HTML, Dokumen, tetingkap.

Perhatikan bahawa tetingkap sebenarnya bukan node DOM tetapi ia melaksanakan antara muka EventTarget, jadi, untuk kesederhanaan, kami mengendalikannya seperti nod induk objek dokumen.

Cawangan ini penting kerana ia adalah jalan di mana peristiwa menyebarkan (atau aliran). Penyebaran ini adalah proses memanggil semua pendengar untuk jenis acara yang diberikan, yang dilampirkan pada nod di cawangan. Setiap pendengar akan dipanggil dengan objek acara yang mengumpulkan maklumat yang berkaitan dengan acara tersebut (lebih lanjut mengenai ini kemudian).

ingat bahawa beberapa pendengar boleh didaftarkan pada nod untuk jenis acara yang sama. Apabila penyebaran mencapai satu nod tersebut, pendengar dipanggil mengikut urutan pendaftaran mereka.

Ia juga harus diperhatikan bahawa penentuan cawangan adalah statik, iaitu, ia ditubuhkan pada penghantaran awal acara tersebut. Pengubahsuaian pokok yang berlaku semasa pemprosesan acara akan diabaikan.

Penyebaran adalah bidirectional, dari tingkap ke sasaran acara dan belakang. Penyebaran ini boleh dibahagikan kepada tiga fasa:

1. dari tetingkap ke ibu bapa sasaran acara: Ini adalah fasa penangkapan
2. sasaran acara itu sendiri: ini adalah fasa sasaran
3. dari ibu bapa sasaran kembali ke tingkap: fasa gelembung

Apa yang membezakan fasa ini adalah jenis pendengar yang dipanggil.

fasa penangkapan acara

Dalam fasa ini hanya penangkap pendengar dipanggil, iaitu, pendengar yang didaftarkan menggunakan nilai yang benar untuk parameter ketiga AddEventListener:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Jika parameter ini ditinggalkan, nilai lalai adalah palsu dan pendengar bukan penangkap.

Jadi, semasa fasa ini, hanya penangkap yang terdapat di jalan dari tingkap ke ibu bapa sasaran acara dipanggil.

fasa sasaran acara

Dalam fasa ini semua pendengar yang didaftarkan pada sasaran acara akan dipanggil, tanpa mengira nilai bendera tangkapan mereka.

fasa menggelegak peristiwa

Semasa fasa menggelegak hanya hanya kapten bukan kapten yang akan dipanggil. Iaitu, hanya pendengar yang berdaftar dengan nilai palsu untuk parameter ketiga addEventListener ():

el<span>.addEventListener('click', listener, true)
</span>

Perhatikan bahawa walaupun semua peristiwa mengalir ke sasaran acara dengan fasa penangkapan, fokus, kabur, beban dan beberapa orang lain, jangan gelembung. Iaitu, perjalanan mereka berhenti selepas fasa sasaran .

Oleh itu, pada akhir penyebaran, setiap pendengar di cawangan telah dipanggil tepat sekali.

Bubbling acara tidak berlaku untuk setiap jenis acara. Semasa penyebaran, ada kemungkinan pendengar untuk mengetahui sama ada peristiwa gelembung dengan membaca harta benda boolean objek acara.

Tiga fasa aliran acara digambarkan dalam rajah berikut dari spesifikasi W3C Uievents.

Copyright © 2016 World Wide Web Consortium, (MIT, Ercim, Keio, Beihang).

Mengakses Maklumat Penyebaran

Saya telah menyebut harta benda .bubbles objek acara. Terdapat beberapa sifat lain yang disediakan oleh objek ini yang tersedia kepada pendengar untuk mengakses maklumat berbanding dengan penyebaran.

E.Target merujuk sasaran acara.
e.currentTarget adalah nod di mana pendengar yang sedang didaftarkan. Ini adalah nilai yang sama dari konteks penyerahan pendengar, iaitu, nilai yang dirujuk oleh kata kunci ini.
kita juga dapat mengetahui fasa semasa dengan E.EventPhase. Ia adalah integer yang merujuk kepada satu tiga pemalar pembina acara yang menangkap_phase, bubbling_phase dan at_target.

meletakkannya dalam amalan

mari kita lihat konsep di atas menjadi amalan. Dalam pena berikut, terdapat lima kotak persegi bersarang, bernama B0 ... B4. Pada mulanya, hanya kotak luar B0 yang dapat dilihat; Yang dalaman akan menunjukkan apabila penunjuk tetikus melayang di atasnya. Apabila kita mengklik pada kotak, log aliran penyebaran ditunjukkan di atas meja ke kanan.

Lihat pen JMXDPZ oleh SitePoint (@SitePoint) pada codepen.

Malah mungkin untuk mengklik di luar kotak: Dalam kes ini, sasaran acara akan menjadi badan atau elemen HTML, bergantung pada lokasi skrin klik.

Menghentikan Penyebaran

Penyebaran acara boleh dihentikan di mana -mana pendengar dengan menggunakan kaedah stoppropagation objek acara. Ini bermakna semua pendengar yang didaftarkan pada nod pada laluan penyebaran yang mengikuti sasaran semasa tidak akan dipanggil. Sebaliknya, semua pendengar yang lain yang dilampirkan pada sasaran semasa masih akan menerima acara tersebut.

kita boleh menyemak tingkah laku ini dengan garpu mudah demo terdahulu, hanya memasukkan panggilan ke Stoppropagation () di salah satu pendengar. Di sini kami telah menyiapkan pendengar baru ini sebagai penangkap ke senarai panggilan balik yang didaftarkan di tetingkap:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Dengan cara ini, kotak apa pun yang diklik, penyebaran berhenti lebih awal, hanya mencapai pendengar penangkap pada tetingkap.

Menghentikan penyebaran segera

Seperti yang ditunjukkan oleh namanya, StopimMediatePropagation melemparkan brek secara langsung, menghalang adik -beradik pendengar semasa menerima acara tersebut. Kita dapat melihat ini dengan perubahan minimum ke pen terakhir:

<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

Sekarang, tiada apa yang dikeluarkan dalam jadual log, tidak juga baris penangkap tetingkap C1 dan C2, kerana penyebaran berhenti selepas pelaksanaan pendengar baru.

Pembatalan Acara

Beberapa peristiwa dikaitkan dengan tindakan lalai yang dilaksanakan oleh pelayar pada akhir penyebaran. Sebagai contoh, klik pada elemen pautan atau klik pada butang hantar borang menyebabkan penyemak imbas menavigasi ke halaman baru, atau menyerahkan borang masing -masing.

Adalah mungkin untuk mengelakkan pelaksanaan tindakan lalai tersebut dengan pembatalan peristiwa, dengan memanggil satu lagi kaedah objek acara, E.PreventDefault, dalam pendengar.

Kesimpulan

Dengan itu, saya berharap dapat menunjukkan kepada anda bagaimana peristiwa menggelegak dan acara menangkap kerja di JavaScript. Jika anda mempunyai sebarang pertanyaan atau komen, saya gembira mendengarnya dalam perbincangan di bawah.

Rujukan

• Model Objek Dokumen (DOM) Tahap 2 Spesifikasi Acara
• w3c dom4 - acara
• dom - standard hidup - peristiwa
• acara W3C UI - DOM Event Architecture
• msn - peristiwa dan dom

Artikel ini dikaji semula oleh Yaphi Berhanu dan Dominic Myers. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!

Soalan Lazim (Soalan Lazim) mengenai peristiwa yang menggelegak di JavaScript

Apakah perbezaan utama antara peristiwa yang menggelegak dan penangkapan acara? Unsur -unsur telah mendaftarkan pegangan untuk acara itu. Perbezaan utama terletak pada arah penyebaran peristiwa yang relatif terhadap pokok Dom. Dalam keadaan menggelegak, acara pertama mencetuskan pada elemen sasaran yang paling dalam, dan kemudian gelembung sehingga ibu bapanya. Sebaliknya, penangkapan acara melibatkan acara yang turun ke elemen sasaran, bermula dari ibu bapanya. Bubbling dengan menggunakan kaedah stoppropagation (). Kaedah ini menghalang penyebaran peristiwa semasa dalam fasa penangkapan dan menggelegak. Berikut adalah contoh:

elemen.addeventListener ('klik', fungsi (event) { event.stoppropagation (); ); tidak membesarkan unsur -unsur induknya. Sebagai contoh, jika anda mempunyai elemen induk dengan beberapa elemen kanak -kanak, dan anda ingin mendengar peristiwa tertentu pada semua elemen ini, anda boleh menetapkan pendengar acara pada ibu bapa dan memanfaatkan peristiwa yang menggelegak. Dengan cara ini, apabila acara itu dicetuskan pada unsur -unsur kanak -kanak, ia akan gelembung kepada ibu bapa dan anda boleh mengendalikannya di sana.

Bolehkah saya menggunakan peristiwa yang menggelegak dan menangkap pada masa yang sama? Ini dikenali sebagai delegasi acara. Ia adalah teknik di mana anda mewakilkan pengendalian acara ke elemen induk dan bukannya menetapkan pendengar acara pada unsur -unsur kanak -kanak individu. Ini boleh menjadi sangat berguna apabila anda mempunyai sejumlah besar elemen kanak -kanak.

Apakah kelakuan lalai penyebaran peristiwa dalam JavaScript? Ini bermakna bahawa secara lalai, peristiwa akan bermula dari elemen sasaran dan gelembung sehingga akar dokumen. Walau bagaimanapun, anda boleh mengubah tingkah laku ini dengan menggunakan kaedah addEventListener () dengan parameter useCapture yang ditetapkan kepada benar, yang akan membolehkan penangkapan acara. Satu peristiwa dipecat dari elemen bersarang, acara itu akan menyebarkan melalui nenek moyang unsur bersarang di Dom Tree. Ini adalah peristiwa yang menggelegak. Setiap nenek moyang pada gilirannya mendapat peluang untuk bertindak balas terhadap acara tersebut. Penyebaran ini berterusan sehingga ia mencapai akar dokumen atau sehingga stoppropagation () dipanggil.

Bolehkah saya mengelakkan tindakan lalai peristiwa dalam peristiwa yang menggelegak? Tindakan lalai peristiwa dalam peristiwa yang menggelegak dengan menggunakan kaedah pencegahanDefault (). Kaedah ini membatalkan peristiwa jika ia boleh dibatalkan, yang bermaksud tindakan lalai yang dimiliki oleh peristiwa tidak akan berlaku. Dalam JavaScript adalah fasa, fasa sasaran, dan fasa menggelegak. Semasa fasa penangkapan, acara itu turun ke elemen. Fasa sasaran adalah di mana acara telah mencapai elemen sasaran. Fasa menggelegak adalah apabila peristiwa itu gelembung dari elemen. Bubbles harta objek acara. Harta ini mengembalikan nilai boolean yang menunjukkan sama ada peristiwa gelembung melalui DOM atau tidak. ) Kaedah digunakan untuk menghentikan penyebaran acara tersebut. Perbezaannya ialah Stoppropagation () menghentikan peristiwa itu daripada menggelegak rantaian acara, sementara StopimMediatePropagation () menghalang pendengar lain dari peristiwa yang sama dari dipanggil.

Atas ialah kandungan terperinci Acara menggelegak di JavaScript? Penyebaran acara dijelaskan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!