Dacă nu ați observat, de cele mai multe aplicații și site-uri destul de plictisitor dacă există ele însele. Ei te cunosc interfață pompos și ușor de reținut, dar impresia de ea vine foarte repede la zero, dacă nu începe să interacționeze cu ei:
Motivul pentru acest lucru este foarte simplu. Aplicațiile există în scopul de a răspunde la acțiunile tale. Există unele stimulente care te fac să rulați aplicația și începe să le utilizați. Tot restul de ceea ce fac după ce depinde de ceea ce le spune să facă. Acest lucru este în cazul în care lucrurile devin cu adevărat interesante.
Tu specificați aplicațiile care au nevoie să facă, forțându-le să reacționeze la ceea ce este cunoscut sub numele evenimentului. În acest articol considerăm de supraveghere, că astfel de evenimente și modul în care acestea pot fi utilizate.
Care este evenimentul?
În general, tot ceea ce creați poate fi modelat prin următoarea declarație:
Puteți umple golurile din această afirmație nenumărate lucruri. Primul defect raportează că ceva se întâmplă. A doua decalajul descrie reacția la ea. Iată câteva exemple de umplere această declarație:
Acest model versatil este aplicabil tuturor cod, pe care îl constituie. Acest model se aplică și tuturor cod care au fost vreodată toți prietenii, dezvoltatorii / designeri pentru aplicațiile lor.
Nu există nici un fel în jurul acestui model, asa. nu există nici un punct încercat. În schimb, trebuie să te uiți mai adânc în acest lucru foarte util, cunoscut ca un eveniment.
Evenimentul nu este nimic mai mult decât un semnal. El a spus că ceva sa întâmplat. Acest lucru poate fi un click de mouse. Acesta poate fi apăsarea unei taste de pe tastatură. Acest lucru poate fi o schimbare în dimensiunea ferestrei. Acesta poate fi doar faptul că a avut loc numai la încărcarea documentului.
Ne întoarcem la modelul nostru. Evenimentele alcătuiesc prima jumătate a declarației:
Evenimente determina lucru care se întâmplă. Ei trimit un semnal. A doua parte a modelului determină răspunsul la eveniment:
- Urmărirea evenimentelor;
- Reacție la evenimente.
1. Urmărirea evenimentelor
Să fiu sincer, m-am dus o dată, prin tot ceea ce face în cadrul aplicației pentru a determina evenimente. Uneori, aplicația detectează automat evenimentul, de exemplu, atunci când descărcarea. Uneori, un eveniment este definit ca rezultat al interacțiunii cu aplicația.
Trebuie remarcat faptul că evenimentul de aplicare este bombardat în mod constant, indiferent dacă sunt sau nu le rezolvați sau nu. Sarcina noastră este de a specifica cererea de a monitoriza doar acele evenimente care avem nevoie.
Greu de lucru pentru a monitoriza evoluțiile relevante, am efectuat o funcție numită addEventListener. Această funcție este responsabil pentru a fi în mod constant de alertă și notifică celelalte părți ale cererii dumneavoastră, atunci când există un fel de un eveniment interesant.
Modul în care utilizați această funcție, după cum urmează:
Să examinăm ceea ce fiecare parte a acestei funcții.
Ai apela addEventListener prin elementul sau obiectul pe care doriți să ascultați pentru evenimente. Ca o regulă, este DOM element, dar poate fi, de asemenea, o cutie de documente, sau orice alt obiect care poate genera evenimente.
numele evenimentului
Primul argument pe care îl specificați pentru funcția addEventListener - acesta este numele evenimentului pe care doriți să o urmăriți. Lista completă a evenimentelor cu care puteți interacționa, este prea mare pentru a aduce aici, în plin (mai bine accesați această pagină), dar unele dintre cele mai frecvente evenimente cu care se vor întâlni sunt după cum urmează:
de fiecare dată când utilizați rotița mouse-ului pentru a defila în sus sau în jos.
Rutina evenimentului
Ca un al doilea argument, trebuie să specificați funcția care va fi apelat atunci când se înregistrează evenimentul. Aceasta se numește o tratare a evenimentului. Doar de mai jos voi vorbi despre asta în detaliu.
Capture sau nu pentru a captura, aceasta este întrebarea!
Ultimul argument poate fi fie adevărat sau fals.
Rezumând toate cele de mai sus
Acum, că sunteți familiarizat cu funcția addEventListener. Să rezuma totul cu un exemplu real de viață:
În acest exemplu, funcția addEventListener noastră atașată la obiectul documentului. Când a înregistrat un eveniment de clic. este ca răspuns la acest eveniment este funcția changeColor (cunoscută și ca o tratare a evenimentului). Acest lucru ne aduce mai aproape de conceptul de o reacție la evenimente, așa cum vom discuta în secțiunea următoare.
2. Răspunsul la evenimente
Așa cum sa discutat în secțiunea anterioară, monitorizarea (ascultarea) evenimentul este procesat funcția addEventListener. După eveniment este înregistrat, acesta trebuie să fie procesată de tratare a evenimentului. Nu glumesc când am menționat mai devreme că tratare a evenimentului - nu este nimic, în funcție de:
Singura diferență dintre o caracteristică standard și una care este listat ca o tratare a evenimentului, este faptul că de tratare a evenimentelor este invocată în mod specific de nume în apelul la addEventListener:
Orice cod pe care îl plasați în interiorul tratare a evenimentului va rula atunci când addEventListenerfunction înregistrat evenimentul dorit. Este destul de simplu!
Un exemplu simplu
Cel mai bun mod de a înțelege ceea ce tocmai am învățat - să vadă totul pe un exemplu de cod complet de lucru. Că am fost în mișcare, în paralel, se adaugă următorul marcaj și codul în documentul HTML:
Cu toate acestea, totul se schimbă atunci când faceți clic pe mouse-ul oriunde pe pagină. Odată ce ați face acest lucru, culoarea fundalului paginii se schimbă de la alb la galben strălucitor.
Motivul pentru acest lucru este destul de ușor de înțeles. Să ne uităm la codul:
Apelarea addEventListener este identic cu ceea ce am văzut deja, așa că hai să săriți peste acest pas. În schimb, să acorde o atenție la evenimentele handler changeColor:
Această funcție se numește atunci când documentul înregistrat evenimentul clic. Atunci când această funcție este numit, se stabilește un corp galben strălucitor element de fundal. Corelarea cu afirmația pe care am discutat la început, vom vedea că acest exemplu ar arata astfel:
Dacă ați înțeles ce se întâmplă, atunci asta e grozav! Tocmai ați găsit unul dintre cele mai importante concepte care trebuie înfruntate în programare. Dar noi încă nu am terminat. Nu vom permite manipulare eveniment atât de ușor să sară de pe cârlig nostru, deci hai să ne uităm la un alt moment.
Argumentele de evenimente și tip de eveniment
Rutina evenimentului a face mai mult decât numit pur și simplu atunci când evenimentul este înregistrat de funcția Urmărirea evenimentelor. El are, de asemenea, prin argumentele sale oferă acces la obiectul evenimentului principal. Pentru un acces facil la evenimentul de obiect, trebuie să schimbăm handler semnătură, pentru a prescrie sprijini aceste argumente.
În acest moment, de tratare a evenimentelor - este încă o bună funcție de modă veche. Dar aceasta este ceea ce avem nevoie, este o funcție care are un argument. argumente eveniment!
Puteți folosi orice identificator valid pentru argumentul, dar am tendința de a prefera un e, pentru că face toți băieții dure. Nu este nimic greșit punct de vedere tehnic pentru a defini evenimentul, după cum urmează:
În orice caz, argumentul evenimentului indică obiectul evenimentului, iar obiectul este transmis ca parte a evenimentului. Există un motiv pentru care să acorde o atenție la un astfel de moment, aparent obișnuite și plictisitoare ca un eveniment eveniment.
Acest obiect eveniment conține proprietăți care se referă la cazul în care a avut loc. Eveniment cauzate de click de mouse va avea proprietăți diferite față de un eveniment cauzat prin apăsarea unei taste de pe tastatură.
Cele mai multe dintre evenimente vor avea propriul lor comportament specific, iar obiectul evenimentului este fereastra prin care puteți viziona toate aceste caracteristici unice.
În ciuda mare varietate de evenimente și obiecte de evenimente pe care le puteți obține ca rezultat al acestora, există anumite caracteristici care sunt comune tuturor.
Acest lucru a devenit posibil datorită faptului că toate obiectele eveniment derivate din eveniment de tip bază (punct de vedere tehnic, Interface). Unele dintre comune proprietăți de tipul evenimentului, pe care le va folosi sunt:- i. currentTarget
- ii. țintă
- iii. preventDefault
- iv. stopPropagation
- v. tip
Ștergerea evenimentelor otslezhivatelya
Uneori va trebui să eliminați elementul de evenimente otslezhivatel. Acest lucru se face prin intermediul inamic etern addEventListener - funcțiile removeEventListener:
evenimente Otslezhivatel, pe care le-am adăugat în prima linie, complet neutralizat apel removeEventListener pe a doua linie. În cazul în care apelul removeEventListener utiliza orice alt argument, altele decât cele care au cauzat un ascultător eveniment, acesta va fi ignorat, iar monitorizarea evenimentelor va continua.
concluzie
Ei bine, asta-i tot. Ați primit o introducere la evenimente. Doar amintiți-vă că aveți funcția addEventListener. care vă permite să înregistrați funcția de tratare a evenimentului. Această handler funcție va fi numit atunci când evenimentele înregistrate în evenimentul corespunzător otslezhivatele.
Deși ne-am atins pe scurt câteva alte subiecte conexe, veți fi mai în măsură să le înțeleagă, le vom lua în considerare în contextul mai multor evenimente complexe.