PARTEA A DOUA
13. Evenimente, etichete HTML și stiluri CSS
- ce sunt evenimentele;
- evenimente de mouse;
- document.getElementById () și document.all;
- cum se numește proprietăți de stil CSS
Dar, în scopul de a merge la un magazin englezesc care se cumpăra brânză de final delir în sine, nu studiază în mod necesar Shakespeare (deși, în cazul în care muta în Anglia timp de mai mulți ani, este încă de dorit).
Prin urmare, pentru început, vă sugerez un "warm-up" pe o temă mai ușoară, de asemenea, adesea folosită pe paginile web.
Apoi voi "fora" modelul obiect, dar voi incerca sa devin mai usor si mai distractiv.
Instrucțiunile pentru evenimente sunt scrise, ca de obicei, într-un script (ca de exemplu, funcția dem_plus (n, k) în exemplul nostru). Dar pentru a atribui acest eveniment pentru execuție - există atribute speciale în etichetele HTML (în exemplul nostru - onClick).
Iată o listă cu aproape toate evenimentele (și atributele corespunzătoare ale etichetelor HTML) în ordine alfabetică:
onAbort, onAfterUpdate, onBeforeUnload, onBlur, onChange, onClick. onDataAvailable, onDatasetChanged, onDatasetComplete, onDblClick. onDragStart, onerror, onErrorUpdate, onFilterChange, onFilterEvent, OnFocus, onHelp, onkeydown, onkeypress, onkeyup, onLoad. onmousemove. onMouseOut. onMouseOver. onmouseup. onreadystatechange, onReset, onResize, onRowEnter, onRowExit, onScroll, onSelect, onSelectStart, onSubmit, onunload.
Nu intră în panică, nu sunt atât de multe evenimente necesare: în esență, acestea sunt mai multe evenimente pentru mouse și evenimentul onLoad pentru a încărca documentul (ele sunt evidențiate în listă în roșu). Și astăzi ne vom limita la cei mai necesari. Dar lucrul principal este că veți învăța cum să suneți evenimentele în mod corect. Și forma apelului este aceeași pentru toți. Toate evenimentele "exotice" vom lua în considerare treptat, dar atunci veți ști exact cum să le abordați.
Evenimente cu mouse-ul
Acestea includ onClick. onDblClick. onDragStart. onmousemove. onMouseOut. onMouseOver și onMouseUp.
Cel mai popular este onClick. onMouseOver și onMouseOut.
În următorul exemplu neimportant folosim aceste trei evenimente și onDblClick.
Deplasați mouse-ul peste acest pseudowook, faceți clic pe el, apoi faceți dublu clic.
Acest exemplu este pur educativ și, în unele cazuri, nu este chiar foarte corect: de exemplu, am folosit o etichetă depășită . Dar acest lucru este de a arăta că, în cazul în care puteți apela atât atribute imediate ale etichetelor HTML, cât și stilurile CSS.
Iată codul pentru acest exemplu:
Când trebuie să schimbăm atributul unui element, vom folosi formula
Când schimbăm stilul CSS pentru un element, lanțul este incrementat de un singur link, deoarece stilul în sine, fiind un atribut al etichetei, are propriile atribute - selectori:
(Observați cum am scris "selectorul" .Acest lucru nu este un accident și în curând vom ajunge la el.)
Principalul obiectiv este acela de a găsi elementul în sine (o etichetă). În eticheta evenimentului nostru eșantion întoarce-te la el la fel. În acest scop, există acest cuvânt cheie. care returnează elementul curent. Dar când dăm clic pe buton, trebuie să schimbăm stilul CSS al celuilalt element, atunci trebuie să-l marcăm într-un fel și să ne referim la acea etichetă.
La fel ca în lecția a zecea, am folosit atributul id și metoda "sniffer" - metoda document.getElementById. Acesta este cel mai universal mod de a lucra în toate browserele. Când am vorbit despre rețele și colecții, am stabilit metoda de căutare pentru aceste colecții. Dar aici nu ni se potrivește, pentru că eticheta
. de care avem nevoie, în nici o "colecție privată" nu este inclusă. Dar documentul are cea mai mare colecție: document.all. Aceasta este - "totul în document". Un "pașaport" pentru el este același id (deși în anumite etichete puteți utiliza numele). Aceasta ar putea fi scrisă după cum urmează:
Notă: în primul caz, kuku-ul nostru este element proprietate și este scris în paranteze și virgule inversate. Și în al doilea caz este un obiect. care "fixează" la colecție prin punctul (și fără citate).
De aceea am vorbit atât de mult despre gramatică și structură în lecțiile anterioare. Când înveți să înțelegi cine este cine, atunci codurile tale vor funcționa. bine, dacă nu de la prima, apoi de cel puțin a treia oară. Pe nota urechii: codurile mari și complexe, niciodată și niciodată la nimeni de la prima dată în mod corect nu funcționează. Dar pentru a ajunge la ele, trebuie să înveți cum mama a spălat cadranul. Deci, nu fi surprins și nu fi ofensat dacă se pare că repet prea mult. Acesta este bine conceput.
A doua cale - prin document.all - nu funcționează întotdeauna și nu peste tot. Anterior, a lucrat destul de clar în IE. Adevărat, au apărut noi generații de browsere bazate pe NetScape, unde funcționează cumva, deși conceptul de document.all nu este încă susținut acolo. Prin urmare, dacă doriți o garanție de aproape 100%, utilizați document.getElementById.
Și din nou: în loc de onMouseOver în această situație, puteți utiliza onMouseMove cu același efect. Ele diferă în același mod ca document.write () și document.writeln (). Nu vom continua asta astăzi.
Apelarea stilurilor CSS
În primul rând, ne modernizăm ușor exemplul: eliminați această etichetă fosilă . Pentru a face acest lucru, trebuie să setăm culoarea în stilul CSS în sine Aceasta este:
Și aici vom intra și la evenimente. Ei bine, cum se face acest lucru, știm deja: Dacă vedeți stilul CSS, culoarea însăși poate fi scrisă în formă prescurtată, ca în CSS. În cazul unui atribut de tag o astfel de înregistrare nu ar fi trecut. Și acum vom face o etichetă Play? Ea doar bate, dar nu deschide nimic, nu te uita. Și acum vom încerca să o facem noi înșine.Articole similare