Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Tapahtumien Eteneminen ja Delegointi Selitetty | Tapahtumien Käsittely ja Käyttäjävuorovaikutukset JavaScriptissä
Edistynyt JavaScript-Osaaminen

bookTapahtumien Eteneminen ja Delegointi Selitetty

Tapahtumien eteneminen

Tapahtumien eteneminen kuvaa, miten tapahtuma kulkee DOM-puussa sen laukaisemisen jälkeen, ja siihen kuuluu kolme erillistä vaihetta: Kaappausvaihe, Kohdevaihe ja Kuplintavaihe.

Kaappausvaihe (Capture)

Tapahtuma alkaa DOM-puun juuresta (window) ja etenee kohti kohde-elementtiä. Tämän vaiheen tapahtumankuuntelijat sieppaavat tapahtuman sen kulkiessa alaspäin.

Kohdevaihe

Tapahtuma saavuttaa kohde-elementin (elementin, joka laukaisi tapahtuman). Tässä vaiheessa suoritetaan kohde-elementtiin liitetyt tapahtumankuuntelijat.

Kuplintavaihe (Bubble)

Kun tapahtuma on saavuttanut kohde-elementin, se alkaa liikkua takaisin DOM-puun juureen (window), kuplien ylöspäin vanhemman elementtien kautta. Tämä on yleisimmin käytetty vaihe, joka mahdollistaa vanhemman elementtien reagoimisen lapsielementtien laukaisemiin tapahtumiin.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Tapahtuma etenee DOM-puussa, kun button-elementtiä klikataan. Ensin tapahtuma laukeaa button-elementissä (kohdevaihe), jonka jälkeen se kuplii ylöspäin sisempään div-elementtiin ja lopulta ulompaan div-elementtiin (kuplintavaihe).

Tapahtumien delegointi

Tapahtumien delegointi on tekniikka, jossa hyödynnetään tapahtumien etenemistä käsittelemällä lapsielementtien tapahtumat yhdellä tapahtumankuuntelijalla vanhemmassa elementissä. Sen sijaan, että jokaiselle lapselle lisättäisiin oma kuuntelija, vanhempi elementti kuuntelee tapahtumia, jotka kuplivat lapsiltaan. Tällä lähestymistavalla on kaksi merkittävää etua:

  1. Suorituskyky: Tapahtumankuuntelijoiden määrän vähentäminen parantaa suorituskykyä, erityisesti tilanteissa, joissa elementtejä luodaan dynaamisesti (esim. lista, johon lisätään uusia kohteita);
  2. Ylläpidettävyys: Tapahtumien delegointi yksinkertaistaa koodia, erityisesti suurten DOM-rakenteiden tai dynaamisen sisällön kanssa työskenneltäessä.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Sen sijaan, että jokaiselle button-elementille lisättäisiin oma klikkauskuuntelija, lisätään yksi kuuntelija div-yläelementille. Tapahtuma kuplii button-elementeistä div-elementtiin, jossa se käsitellään.

Huono lähestymistapa

Hyvä lähestymistapa

Käytännön esimerkki: Dynaamisen listan käsittely

Tapahtumien delegointi soveltuu erinomaisesti listojen tai taulukoiden vuorovaikutusten hallintaan, jotka voivat kasvaa ajan myötä (esim. tehtävien lisääminen tehtävälistaan tai tuotteiden lisääminen ostoskoriin). Kun kohteita lisätään tai poistetaan, vanhemman säiliön (kuten ul tai table) vastuulla on kaikkien vuorovaikutusten käsittely, jolloin yksittäisiin lapsielementteihin ei tarvitse liittää tai poistaa kuuntelijoita.

index.html

index.html

index.css

index.css

index.js

index.js

copy

1. Mitä on tapahtuman leviäminen?

2. Missä vaiheessa tapahtuma siirtyy ylöspäin DOM-puussa saavutettuaan kohde-elementtinsä?

3. Miksi tapahtumien delegointi on hyödyllistä, erityisesti dynaamisen sisällön kanssa?

question mark

Mitä on tapahtuman leviäminen?

Select the correct answer

question mark

Missä vaiheessa tapahtuma siirtyy ylöspäin DOM-puussa saavutettuaan kohde-elementtinsä?

Select the correct answer

question mark

Miksi tapahtumien delegointi on hyödyllistä, erityisesti dynaamisen sisällön kanssa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain the difference between capturing and bubbling phases in more detail?

How does event delegation work with dynamically added elements?

Can you provide a code example of event delegation in JavaScript?

Awesome!

Completion rate improved to 2.22

bookTapahtumien Eteneminen ja Delegointi Selitetty

Pyyhkäise näyttääksesi valikon

Tapahtumien eteneminen

Tapahtumien eteneminen kuvaa, miten tapahtuma kulkee DOM-puussa sen laukaisemisen jälkeen, ja siihen kuuluu kolme erillistä vaihetta: Kaappausvaihe, Kohdevaihe ja Kuplintavaihe.

Kaappausvaihe (Capture)

Tapahtuma alkaa DOM-puun juuresta (window) ja etenee kohti kohde-elementtiä. Tämän vaiheen tapahtumankuuntelijat sieppaavat tapahtuman sen kulkiessa alaspäin.

Kohdevaihe

Tapahtuma saavuttaa kohde-elementin (elementin, joka laukaisi tapahtuman). Tässä vaiheessa suoritetaan kohde-elementtiin liitetyt tapahtumankuuntelijat.

Kuplintavaihe (Bubble)

Kun tapahtuma on saavuttanut kohde-elementin, se alkaa liikkua takaisin DOM-puun juureen (window), kuplien ylöspäin vanhemman elementtien kautta. Tämä on yleisimmin käytetty vaihe, joka mahdollistaa vanhemman elementtien reagoimisen lapsielementtien laukaisemiin tapahtumiin.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Tapahtuma etenee DOM-puussa, kun button-elementtiä klikataan. Ensin tapahtuma laukeaa button-elementissä (kohdevaihe), jonka jälkeen se kuplii ylöspäin sisempään div-elementtiin ja lopulta ulompaan div-elementtiin (kuplintavaihe).

Tapahtumien delegointi

Tapahtumien delegointi on tekniikka, jossa hyödynnetään tapahtumien etenemistä käsittelemällä lapsielementtien tapahtumat yhdellä tapahtumankuuntelijalla vanhemmassa elementissä. Sen sijaan, että jokaiselle lapselle lisättäisiin oma kuuntelija, vanhempi elementti kuuntelee tapahtumia, jotka kuplivat lapsiltaan. Tällä lähestymistavalla on kaksi merkittävää etua:

  1. Suorituskyky: Tapahtumankuuntelijoiden määrän vähentäminen parantaa suorituskykyä, erityisesti tilanteissa, joissa elementtejä luodaan dynaamisesti (esim. lista, johon lisätään uusia kohteita);
  2. Ylläpidettävyys: Tapahtumien delegointi yksinkertaistaa koodia, erityisesti suurten DOM-rakenteiden tai dynaamisen sisällön kanssa työskenneltäessä.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Sen sijaan, että jokaiselle button-elementille lisättäisiin oma klikkauskuuntelija, lisätään yksi kuuntelija div-yläelementille. Tapahtuma kuplii button-elementeistä div-elementtiin, jossa se käsitellään.

Huono lähestymistapa

Hyvä lähestymistapa

Käytännön esimerkki: Dynaamisen listan käsittely

Tapahtumien delegointi soveltuu erinomaisesti listojen tai taulukoiden vuorovaikutusten hallintaan, jotka voivat kasvaa ajan myötä (esim. tehtävien lisääminen tehtävälistaan tai tuotteiden lisääminen ostoskoriin). Kun kohteita lisätään tai poistetaan, vanhemman säiliön (kuten ul tai table) vastuulla on kaikkien vuorovaikutusten käsittely, jolloin yksittäisiin lapsielementteihin ei tarvitse liittää tai poistaa kuuntelijoita.

index.html

index.html

index.css

index.css

index.js

index.js

copy

1. Mitä on tapahtuman leviäminen?

2. Missä vaiheessa tapahtuma siirtyy ylöspäin DOM-puussa saavutettuaan kohde-elementtinsä?

3. Miksi tapahtumien delegointi on hyödyllistä, erityisesti dynaamisen sisällön kanssa?

question mark

Mitä on tapahtuman leviäminen?

Select the correct answer

question mark

Missä vaiheessa tapahtuma siirtyy ylöspäin DOM-puussa saavutettuaan kohde-elementtinsä?

Select the correct answer

question mark

Miksi tapahtumien delegointi on hyödyllistä, erityisesti dynaamisen sisällön kanssa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 4
some-alt