Pagkabula sa Kaganapan at Pagkuha ng Kaganapan Sa JavaScript: Ang kailangan mo lamang malaman

Ang Pag-bubbling sa Kaganapan at Pag-capture ng Kaganapan ay ang pinaka ginagamit na mga termino sa JavaScript sa oras ng pagdaloy ng kaganapan. Ito ang dalawang paraan ng paglaganap ng kaganapan sa HTML DOM API. Ang artikulong ito sa Event Bubbling at Event Capturing sa JavaScript ay maglalarawan nang detalyado kung bakit kinakailangan namin ang mga ito sa sa sumusunod na pagkakasunud-sunod:

• • • Ano ang Event Bubbling sa JavaScript?
    • Ano ang Propagasyon ng Kaganapan?
    • Ano ang Pagkuha ng Kaganapan?
    • Paggamit ng Event Bubbling at Capturing ng Kaganapan sa JavaScript
    • Pamamaraan sa Paggawa

Ano ang Event Bubbling sa JavaScript?

Ang Event Bubbling ay ang katagang dapat makita ng mga tao habang bumubuo ng isang web application o webpage na gumagamit . Talaga, ang Event Bubbling ay isang diskarte kung saan ang mga handler ng kaganapan ay tinawag kapag ang isang item ay nakasarang sa isa pang item at dapat ay pareho ng kaganapan. Ito ay katulad ng Encapsulation.

Ang Event Bubbling ay isang maliit na bahagi lamang ng paghawak ng kaganapan sa JavaScript. Upang maunawaan ito nang higit pa kailangan nating malaman ang tungkol sa Pagpapalaganap ng Kaganapan at kung paano nito sinusuportahan ang Pagkalabog ng Kaganapan.

Ano ang Propagasyon ng Kaganapan?

Ang Propagasyon ng Kaganapan ay maihahambing bilang isang termino para sa magulang na may bubbling ng kaganapan at pagkuha bilang anak nito.Kinakatawan ito tulad ng sumusunod:

Kung nag-click ka sa anumang imahe sa gayon hindi lamang ito makakabuo ng isang kaganapan sa pag-click ngunit nagpapatuloy ito sa magulang na 'a' at lolo 'li'. Sa ganitong paraan nagaganap ang paglaganap ng pagpapaandar. Dito isinasaalang-alang ang imahe bilang bata at ito ang target ng kaganapan kung saan nabuo ang pag-click. Ang imahe kasama ang mga ninuno nito na magkasama ay bumubuo ng sangay sa isang terminolohiya ng puno. Mahalaga ang sangay sa pag-alam natin sa landas sa kahabaan ng kaganapan.

Ang bawat isa sa mga tagapakinig ay tinawag na may isang bagay sa kaganapan ayon sa pagkakalagay na nangangalap ng impormasyon tungkol sa kaganapan. Napakahalaga ng paglaganap na ito nang malaman namin ang proseso ng pagtawag sa lahat ng mga tagapakinig para sa naibigay na kaganapan. Mula sa larawan sa itaas maaari nating mapansin na ang pagpapasiya ng sangay ay static. Anumang mga pagbabago sa puno na nangyayari sa panahon ng kaganapan ay hindi pinapansin. Dito ang pagpapalaganap ay bidirectional iyon ay mula sa window patungo sa target na kaganapan at makakabalik. Dito ang malawak na pagkalat ay ikinategorya sa tatlong pangunahing uri. Iyon ang mga:

1. Ang Capture Phase: Pagpunta sa window sa yugto ng target na kaganapan.
2. Ang Target na Phase: Ito ang target na yugto.
3. Ang Bubble Phase: Mula sa target na target ng magulang pabalik sa window.

Ano ang Pagkuha ng Kaganapan?

Sa yugtong ito, ang mga nakikinig sa tagukuha ay tinawag na ang halaga ay nairehistro bilang 'totoo'. Nakasulat ito bilang:

el.addEventListener ('pag-click', tagapakinig, totoo)

Narito ang halaga ng tagapakinig ay nairehistro upang maging 'totoo' kaya ang kaganapan na ito ay nakuha. Kung walang halaga sa gayon ang halaga bilang default ay mali at ang kaganapan ay hindi mahuhuli. Kaya't sa yugtong ito ang kaganapang iyon na ang halaga ay totoo ay matatagpuan lamang ang kanilang daan mula sa window at tatawagin at makuha.

si java ay may-isang relasyon

Pagkatapos sa yugto ng target na kaganapan, ang lahat ng nakarehistrong tagapakinig ay tinatawag na anuman ang kanilang katayuan sa watawat na totoo o hindi.

Paggamit ng Event Bubbling at Capturing ng Kaganapan sa JavaScript

Sa yugto ng Bubbling, tanging ang hindi nakakakuha ay tinatawag, iyon ang mga kaganapan na may halagang flag bilang 'false'. Ang pagbula ng Kaganapan at Pag-capture ng Kaganapan ay lubhang kapaki-pakinabang at mahalaga sa terminolohiya ng DOM (Dokumentong Bagay ng Bagay).

el.addEventListener ('click', listener, false) // hindi makunan ng tagapakinig el.addEventListener ('click', listener) // hindi makunan ng tagapakinig

Sa itaas ng piraso ng code ay ipinapakita ang pagtatrabaho ng bubbling at pagkuha ng yugto. Hindi lahat ng mga kaganapan ay pupunta sa target ng kaganapan. Ang ilan sa kanila ay hindi nabulabog. Humihinto ang kanilang paglalakbay pagkatapos ng target na yugto. Ang tatlong daloy ng yugto ng kaganapan ay nakalarawan sa sumusunod na diagram:

Ang bubbling ng kaganapan ay hindi gagana sa lahat ng mga uri ng mga kaganapan, gayunpaman, dapat taglayin ng nakikinig '.Bubble ”Pag-aari ng Boolean ng object ng kaganapan. Ang ilan sa iba pang mga pag-aari ay kinabibilangan ng:

1. e.target: na tumutukoy sa target ng kaganapan.
2. e.currentTarget: ito ang mode kung saan nakarehistro ang kasalukuyang mga tagapakinig. Narito ang halaga ay sumangguni sa pamamagitan ng paggamit ito keyword.
3. e.eventPhase: Ito ay isang integer na tumutukoy sa iba pang tatlong keyword tulad ng Capturing_phase, Bubbling_phase, AT_Target yugto

Pamamaraan sa Paggawa

Suriin natin nang mabuti ang larawan sa itaas. I-click sa amin ang 'buttonOne' na elemento at pagkatapos ay kaagad isang kaganapan ay magti-trigger. Karaniwan ang isang kaganapan ay nagsisimula ng paglalakbay nito mula sa ugat na ang pinakamataas na elemento ng puno. Pagkatapos ay pupunta ito sa pagsunod sa puno ng target na kaganapan na 'buttonOne'. Narito kung paano ito naglalakbay:

Tulad ng ipinakita sa figure ang kaganapan ay gumagawa ng paraan sa pamamagitan ng mga terminolohiya ng DOM na umaabot sa target na kaganapan sa huli. Ngayon kapag naabot na ng kaganapan ang target nito ay hindi ito natatapos. Nagpapatuloy ito sa loob ng mga terminolohiya ng DOM na nakalarawan sa larawan sa ibaba.

t uri ng data ng petsa ng sql

Tulad ng dati, ang bawat elemento sa landas ng kaganapan habang umaandar ito ay aabisuhan tungkol sa pagkakaroon nito. Habang nagpapatuloy tulad nito dapat mong iniisip kung maaari nating ihinto ang proseso o hindi. Kaya, ang sagot sa tanong ay Oo maaari nating ihinto ang paglaganap ng kaganapan. Ginagawa ito sa pamamagitan ng pagtawag sa 'StopPropagation' paraan ng bagay ng kaganapan.

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

Sa pamamagitan ng paglalapat ng keyword nagagawa naming ihinto ang paglaganap. Gumagana ito tulad nito, kapag inilalapat namin ang keyword na ' stopPropagation ” kung gayon ang lahat ng mga kaganapan sa ilalim ng pangunahing mga kaganapan ay hindi tinawag at samakatuwid hindi sila tatawagin tulad ng nabanggit sa piraso ng code sa itaas. May isa pang keyword na kilala bilang “ stopImmediatePropagation ”. Tulad ng ipinahihiwatig ng pangalan ay agad nitong hinihinto ang paglilitis ng magkapatid.

Sa pamamagitan nito, napunta kami sa dulo ng aming artikulo. Sana naiintindihan mo kung ano ang Event Bubbling at Event Capturing sa JavaScript.

Ngayong alam mo na ang tungkol sa Event Bubbling at Event Capturing sa JavaScript, tingnan ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay sa Pag-unlad ng Web na Alamin kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng 'Pagkabula sa Kaganapan at Pagkuha ng Kaganapan sa JavaScript' at babalikan ka namin.