- numărul de lecție
practică
pe cicluri de rafinare și funcții
Lucrul cu DOM
Unele lucruri avansate
bibliotecă jQuery
- numărul de lecție
manual
jQuery pentru incepatori - numărul de lecție
fundație
de lucru cu jQuery - numărul de lecție
manipulare
elemente ale paginii - numărul de lecție
muncă
cu un set de elemente - numărul de lecție
muncă
evenimente cu jQuery - numărul de lecție
Efecte și animație
bibliotecă jQuery - numărul de lecție
Practica de a perfecta
bibliotecă jQuery - numărul de lecție
Lucrul cu
bibliotecă jQueryUI - numărul de lecție
Plugin-uri populare
bibliotecă jQuery
- numărul de lecție
manual
expresii regulate - numărul de lecție
Lucrul cu regularitate
expresii. Capitolul 1. - numărul de lecție
Lucrul cu regularitate
expresii. Capitolul 2. - numărul de lecție
Lucrul cu regularitate
expresii. Capitolul 3. - numărul de lecție
Lucrul cu regularitate
expresii. Capitolul 4. - numărul de lecție
diferențele
de la versiunea PHP
Lucrul cu prelata
- numărul de lecție
manual
pentru a lucra cu panza - numărul de lecție
fundație
cu panza - numărul de lecție
avansat
Lucrul cu panza
imersiune
În plus față de ascensiunea de evenimente, există, de asemenea, o scufundare (pe scenă interceptarea științifică). Acest lucru înseamnă că evenimentul merge mai întâi de sus în jos (etapa de interceptare), este vorba de celule (obiective etapa) noastre și abia apoi începe să iasă (faza ascensiune).
tratare a evenimentului Hang bazat pe scena de interceptare numai prin utilizarea addEventListener. În acest scop, are oa treia opțiune: dacă este adevărat - eveniment de lucru în etapa de interceptare, iar în cazul în fals - în etapa de ascensiune (implicit):
Etapa în care a avut loc evenimentul poate fi determinat de proprietățile event.eventPhase. Se poate lua următoarele valori: 1 - interceptare pasul 2 - pasul gol, 3 - etapa ascensiune.
Intrarea delegației
Imaginați-vă o situație: Să presupunem că avem o li ul câteva. Fiecare li legat următorul eveniment: făcând clic pe ea în final li adăugat „!“.
Să pună în aplicare descrise:
Să presupunem acum că avem, de asemenea, un buton, se adaugă un nou Li cu textul „clic“ la atingerea căruia sfârșitul ul. Va asteptam pentru o surpriza: legat de eveniment nu va funcționa pentru noul li! Pentru a verifica acest lucru:
Faceți clic pe butonul pentru a adăuga Li, apoi pe acest nou li - nu reacționează:
Pentru a rezolva problema, puteți în acest moment pentru a crea un nou li atârnă pe ea prin intermediul addSign addEventListener funcție. Să-l pună în aplicare:
Faceți clic pe butonul pentru a adăuga Li, apoi pe acest nou li - ea reacționează:
Există un al doilea mod de a ocoli problema - delegarea de evenimente. Să-l analizăm.
evenimente deleganți
Esența delegației sunt: Hangare eveniment nu este pentru fiecare Li, iar părinții lor - pe ul.
În același timp performanța de script-ul ar trebui să continue: încă li atunci când faceți clic pe ea în cele din urmă va fi adăugat la „!“. Numai eveniment în noua versiune va fi agățată pe UL:
Pe măsură ce se rotesc: ca evenimentul atârnat pe ul, în interiorul unei funcții, putem prinde Li folosind event.target. Permiteți-mi să vă reamintesc că acest event.target - acesta este tag-ul, care a avut un clic, în acest caz, li.
Deci, aici e soluția la problema noastră în ceea ce privește delegarea:
Rezultatul codului:
În același timp, soluția noastră va lucra în mod automat, chiar și pentru noi li. deoarece evenimentul nu este pe Li navesheno, și la ul:
Faceți clic pe butonul pentru a adăuga Li, apoi pe acest nou li - ea reacționează:
Codul nostru de lucru, dar nu fără defecte sale. Să ne uităm la aceste neajunsuri și scrie o soluție one-stop.
Evenimente de delegare universale
Dezavantajul codul nostru va apărea în cazul în care interiorul li va fi unele etichete imbricate. În cazul nostru, lăsați-l să fie tag-uri i.
În acest caz, apăsarea i-ar introduce un punct de exclamare la sfârșitul unei etichete i. în schimb tag-ul li. așa cum ne-am dori (dacă faceți clic pe Li este cursiv - că totul va fi ok)
Dați clic pe curs - puteți vedea cum „!“ a adăugat că la sfârșitul (împingerea italice va funcționa bine):
Problema este corectată după cum urmează (procedeul descris nu este singurul, dar cel mai usor) folosind metoda cel mai apropiat Găsiți cel mai apropiat Li dvs., kotoorye este event.target părinte ca aceasta: event.target.closest ( „li“).
Cum funcționează: dacă anunțul dvs. este accesat prin i. în event.target este i, și în event.target.closest ( „li“) - li nostru, care ar trebui să lucreze pentru eveniment.
Dacă faceți clic a fost pe un foarte li. apoi în event.target. și event.target.closest ( „li“) se va baza pe Li noastre.
Rezultatul codului:
Nu contează ce adâncimea de imbricare: tag-ul i poate fi în tag-ul b. și că, în tag-ul interval, și numai apoi, în li - nu contează: event.target.closest de proiectare ( „li“) își găsește părintele orice nivel de imbricare.
materiale suplimentare
Ce se face în continuare:
Mai departe spre rezolvarea problemelor la următorul link: obiective pentru lecție.
Când toate decid - du-te la studiul unui subiect nou.
- numărul de lecție
practică
pe cicluri de rafinare și funcții
Lucrul cu DOM
Unele lucruri avansate
bibliotecă jQuery
- numărul de lecție
manual
jQuery pentru incepatori - numărul de lecție
fundație
de lucru cu jQuery - numărul de lecție
manipulare
elemente ale paginii - numărul de lecție
muncă
cu un set de elemente - numărul de lecție
muncă
evenimente cu jQuery - numărul de lecție
Efecte și animație
bibliotecă jQuery - numărul de lecție
Practica de a perfecta
bibliotecă jQuery - numărul de lecție
Lucrul cu
bibliotecă jQueryUI - numărul de lecție
Plugin-uri populare
bibliotecă jQuery
- numărul de lecție
manual
expresii regulate - numărul de lecție
Lucrul cu regularitate
expresii. Capitolul 1. - numărul de lecție
Lucrul cu regularitate
expresii. Capitolul 2. - numărul de lecție
Lucrul cu regularitate
expresii. Capitolul 3. - numărul de lecție
Lucrul cu regularitate
expresii. Capitolul 4. - numărul de lecție
diferențele
de la versiunea PHP
Lucrul cu prelata
- numărul de lecție
manual
pentru a lucra cu panza - numărul de lecție
fundație
cu panza - numărul de lecție
avansat
Lucrul cu panza