addEventListener w pętli for Pytanie

0

Witam, nie mogę zrozumieć czemu klikając na obojętnie jaki element (w sensie dowolnej kolejności) li w liście ul, funkcja się dokonuje, a wydawać by się mogło, że można tylko kliknąć w uporządkowanej kolejności. Najpierw w pętli for i =0 więc metoda addEventListener wykonuje się teoretycznie na liList[0], i tylko ten element o indeksie 0 powinno dać się wykonać. Gdy już się to zrobi można kliknąć na drugi,czyli liList[1] itd. Dlaczego można zacząć klikać w dowolnej kolejności? Wygląda to jakby pętla "robiła się" cały czas do i<liList.length,a nie zatrzymywała się przed klikiem,dając do wyboru tylko konkretny element ?

   <body>
     <ul >
        <li>Doom</li>
        <li>Quake</li>
        <li>Warcraft</li>
        <li>Silent Hill</li>
        <li>Mario</li>
    </ul>
<script>
const liList=document.body.querySelectorAll('li');
       for(let i=0;i<liList.length;i++){
        liList[i].addEventListener('click',function(){
            liList[i].style.color="blue";
            console.log('cos');
        })}
  
</script>
</body>
</html>```
1

Pętla:
for(let i=0;i<liList.length;i++){...}
wykonuje się tylko raz po uruchomieniu strony.

W wyniku jej działania do każdego <li> przypisywana jest akcja wywoływana po kliknięciu. Taki ekwiwalent:
<li onclick="cośtam...">

I w momencie, gdy klikasz na LI odpala się tylko ta przypisana do niego funkcja, która nie ma nawet pojęcia o pętli, której użyłeś, żeby ją tam przypisać.

0
Freja Draco napisał(a):

Pętla:

for(let i=0;i<liList.length;i++){...}
wykonuje się tylko raz po uruchomieniu strony.

W sensie raz całe 5 iteracji?

W wyniku jej działania do każdego <li> przypisywana jest akcja wywoływana po kliknięciu. Taki ekwiwalent:
<li onclick="cośtam...">

Mógłbyś, proszę rozwinąć czemu tak się dzieje,skąd nagle zdarzenie onclick?

0
RivskiWłóczęga napisał(a):
Freja Draco napisał(a):

Pętla:

for(let i=0;i<liList.length;i++){...}
wykonuje się tylko raz po uruchomieniu strony.

W sensie raz całe 5 iteracji?

No... tak właśnie działają pętle dla zadanego przedziału zmiennej sterującej :)

W wyniku jej działania do każdego <li> przypisywana jest akcja wywoływana po kliknięciu. Taki ekwiwalent:
<li onclick="cośtam...">

Mógłbyś, proszę rozwinąć czemu tak się dzieje,skąd nagle zdarzenie onclick?

Bo sam kazałeś dodać tam jego wykrywanie, pisząc:
jakiśtam_obiekt.addEventListener('click', jakaśtam_akcja (...)

0
Freja Draco napisał(a):
RivskiWłóczęga napisał(a):
Freja Draco napisał(a):

Bo sam kazałeś dodać tam jego wykrywanie, pisząc:
jakiśtam_obiekt.addEventListener('click', jakaśtam_akcja (...)

Chodziło mi o to czemu piszesz o zdarzeniu onclick, a nie click?

0

Istnieją trzy różne sposoby przypisania akcji do zdarzenia:
https://www.w3schools.com/jsref/event_onclick.asp
W dwóch pierwszych używa się onclick w tej trzeciej click.

1 użytkowników online, w tym zalogowanych: 0, gości: 1