js click evenimente. Secvența de execuție a scriptului. Eveniment JavaScript onclick și trei moduri de a gestiona evenimente

Gestionarea evenimentelor

Programe client pentru JavaScript se bazează pe un model de programare în care execuția programului este condusă de evenimente. Cu acest stil de programare, browserul web generează un eveniment când se întâmplă ceva cu documentul sau cu un element al acestuia. De exemplu, un browser web generează un eveniment când termină de încărcat un document când utilizatorul trece mouse-ul peste un hyperlink sau apasă o tastă de pe tastatură.

Dacă o aplicație JavaScript este interesată de un anumit tip de eveniment pentru element specific document, poate înregistra una sau mai multe funcții care vor fi apelate atunci când are loc acest eveniment. Vă rugăm să fiți conștienți de faptul că acest lucru nu este trasatura unica programare web: toate aplicațiile cu interfata grafica Utilizatorii acționează în acest fel - așteaptă constant să se întâmple ceva (adică așteaptă să apară evenimente) și răspund la ceea ce se întâmplă.

Tipul evenimentului este un șir care identifică tipul de acțiune care a provocat evenimentul. Tipul „mousemove”, de exemplu, înseamnă că utilizatorul a mutat indicatorul mouse-ului. Tipul „keydown” înseamnă că a fost apăsată o tastă de pe tastatură. Iar tipul „încărcare” înseamnă că descărcarea documentului (sau a unei alte resurse) din rețea s-a încheiat. Deoarece tipul de eveniment este doar un șir, uneori este numit numele evenimentului.

Ținta unui eveniment este obiectul în care a avut loc evenimentul sau cu care este asociat evenimentul. Când vorbesc despre un eveniment, ei menționează de obicei tipul și scopul evenimentului. De exemplu, evenimentul „încărcare” al unui obiect Window sau evenimentul „click” al unui obiect . Cele mai tipice obiective ale evenimentelor din aplicații clientîn JavaScript sunt obiecte fereastră, document și element, dar unele tipuri de evenimente pot apărea în alte tipuri de obiecte.

Un handler de evenimente este o funcție care procesează sau răspunde la un eveniment. Aplicațiile trebuie să-și înregistreze funcțiile de gestionare a evenimentelor cu browserul web, specificând tipul și scopul evenimentului. Când un eveniment de tipul specificat are loc pe ținta specificată, browserul va invoca handlerul. Când handlerii de evenimente sunt apelați pe un obiect, uneori spunem că browser-ul a „suscitat” sau „a aruncat” evenimentul.

Un obiect eveniment este un obiect asociat cu un anumit eveniment și care conține informații despre acel eveniment. Obiectele eveniment sunt transmise funcției de gestionare a evenimentelor ca argument (cu excepția IE8 și mai noi versiuni anterioare, unde obiectul eveniment este disponibil doar ca variabilă globală de eveniment). Toate obiectele eveniment au proprietatea tip, care definește tipul de eveniment și proprietatea ţintă, definind scopul evenimentului.

Pentru fiecare tip de eveniment, un set de proprietăți este definit în obiectul eveniment asociat. De exemplu, un obiect asociat cu evenimentele mouse-ului include coordonatele indicatorului mouse-ului, iar un obiect asociat cu evenimentele de la tastatură conține informații despre tasta apăsată și tastele modificatoare apăsate. Pentru multe tipuri de evenimente, sunt definite numai proprietăți standard, cum ar fi tipul și ținta, și nu sunt transmise proprietăți suplimentare. Informatii utile. Pentru aceste tipuri de evenimente, simpla apariție a evenimentului este importantă și nicio altă informație nu este relevantă.

Propagarea evenimentelor este procesul prin care browserul decide pe ce obiecte să apeleze gestionatorii de evenimente. În cazul unor evenimente destinate singurul obiect(cum ar fi evenimentul „încărcare” al obiectului Window), nu este nevoie să le propagați. Cu toate acestea, atunci când un eveniment are loc pe un element de document, acesta se propagă sau „bulează” în arborele documentului.

Dacă utilizatorul face clic pe un hyperlink, evenimentul „mousemove” va fi lansat mai întâi pe element , definind acest link. Acesta va fi apoi livrat elementelor care le conțin: poate elementul

Elementul și obiectul Document însuși. Uneori este mai convenabil să înregistrați un singur handler de evenimente pe un obiect Document sau alt element container decât să vă înregistrați pe toate elementele de interes.

După definirea unor termeni, putem trece la explorarea problemelor legate de evenimente și procesarea acestora.

Înregistrarea manipulatorilor de evenimente

Există două modalități principale de a înregistra handlere de evenimente. Prima, care a apărut la începutul dezvoltării World Wide Web, este de a seta proprietatea obiectului sau a elementului de document care este ținta evenimentului. A doua metodă, mai nouă și mai universală, este de a trece un handler la o metodă a unui obiect sau element.

Problema este complicată de faptul că fiecare tehnică are două versiuni. Puteți seta o proprietate de gestionare a evenimentelor în codul JavaScript sau într-un element de document prin definirea atributului corespunzător direct în marcajul HTML. Înregistrarea handler-urilor cu un apel de metodă se poate face printr-o metodă standard numită addEventListener(), care este acceptată de toate browserele, cu excepția versiunilor IE 8 și mai jos, și o altă metodă numită attachEvent(), acceptată de toate versiunile de IE până la IE9.

Setarea proprietăților de gestionare a evenimentelor

Cel mai simplu mod de a înregistra un handler de evenimente este să setați o proprietate a țintei evenimentului la funcția de gestionare dorită. Prin convenție, proprietățile de gestionare a evenimentelor au nume care constau din cuvântul „on” urmat de numele evenimentului: onclick, onchange, onload, onmouseover etc. Rețineți că aceste nume de proprietăți sunt sensibile la majuscule și folosesc doar caractere minuscule, chiar și atunci când numele tipului de eveniment este mai multe cuvinte (de exemplu, „readystatechange”). Mai jos sunt două exemple de înregistrare a handlerelor de evenimente:

// Atribuiți funcția proprietății onload a obiectului Window. // Funcția este un handler de evenimente: este apelată când documentul este încărcat window.onload = function() ( // Găsiți elementul var elt = document.getElementById("shipping_address"); // Înregistrați un handler de evenimente care va fi apelat // direct înainte de a trimite formularul elt.onsubmit = function() ( return validate(this); ) )

Această metodă de înregistrare a gestionatorilor de evenimente este acceptată în toate browserele pentru toate tipurile de evenimente utilizate în mod obișnuit. În general, toate interfețele de aplicație acceptate pe scară largă care își definesc evenimentele permit înregistrarea handlerilor prin setarea proprietăților handlerelor de evenimente.

Dezavantajul utilizării proprietăților de gestionare a evenimentelor este că acestea sunt proiectate cu presupunerea că obiectivele de evenimente vor avea cel mult un handler pentru fiecare tip de eveniment. Când creați o bibliotecă pentru a fi utilizată în documente arbitrare, este mai bine să folosiți o tehnică (cum ar fi apelarea metodei addEventListener()) pentru a înregistra handlere care nu modifică sau suprascrie handlerele înregistrate anterior.

Setarea atributelor de gestionare a evenimentelor

Proprietățile handlerelor de evenimente pe elementele documentului pot fi setate și prin definirea valorilor atributelor în etichetele HTML corespunzătoare. În acest caz, valoarea atributului trebuie să fie un șir de cod JavaScript. Acest cod de program nu ar trebui să fie o declarație completă a funcției de gestionare a evenimentelor, ci doar corpul acesteia. Adică, implementarea handler-ului de evenimente în markup HTML nu ar trebui să fie închisă între acolade și precedată de cuvântul cheie de funcție. De exemplu:

Dacă valoarea atributului HTML al handlerului de evenimente constă din mai multe instrucțiuni JavaScript, acestea trebuie separate prin punct și virgulă sau valoarea atributului trebuie să apară pe mai multe linii.

Unele tipuri de evenimente sunt destinate browserului ca întreg, mai degrabă decât pentru orice element specific de document. Handler-urile pentru astfel de evenimente în JavaScript sunt înregistrate în obiectul Window. În marcajul HTML, acestea trebuie plasate într-o etichetă, dar browserul le va înregistra în obiectul Window. Următoarea este o listă completă a unor astfel de gestionari de evenimente definiți de specificația HTML5 nefinalizată:

onafterprint onfocus ononline redimensionare onbeforeprint onhashchange onpage ascunde onstorage onbeforedescărcare onload onpages afișează onundo onblur onmessage onpopstate ondesload onerror onoffline onreface

Când dezvoltați scripturi la nivelul clientului, este o practică obișnuită să separați marcajul HTML de codul JavaScript. Programatorii care respectă această regulă evită (sau cel puțin încearcă să evite) utilizarea atributelor de gestionare a evenimentelor HTML pentru a evita amestecarea codului JavaScript cu marcajul HTML.

addEventListener()

În modelul de evenimente standard, acceptat de toate browserele, cu excepția versiunilor IE 8 și mai mici, ținta unui eveniment poate fi orice obiect - inclusiv obiectele Window și Document și toate obiectele Elements ale elementelor documentului - definind o metodă numită addEventListener() cu care eveniment manipulatorii pot fi înregistrați în acest scop.

Metoda addEventListener() ia trei argumente. Primul este tipul de eveniment pentru care este înregistrat handlerul. Tipul de eveniment (sau numele) trebuie să fie un șir și nu trebuie să includă prefixul „on” folosit la setarea proprietăților gestionatorilor de evenimente. Al doilea argument al metodei addEventListener() este o funcție care ar trebui apelată atunci când are loc un eveniment de tipul specificat. Ultimul argument este transmis metodei addEventListener() cu o valoare booleană. De obicei, acest argument este fals. Dacă treceți adevărat, funcția va fi înregistrată ca un handler de interceptare și va fi apelată într-o altă fază a propagării evenimentului.

Specificația se poate schimba în cele din urmă, astfel încât să fie acceptabil să se omite cel de-al treilea argument, mai degrabă decât să-l treacă în mod explicit fals, dar din momentul scrierii acestui articol, omiterea celui de-al treilea argument are ca rezultat o eroare în unele browsere actuale.

Următorul fragment înregistrează doi handlere de evenimente „clic” pe element. Observați diferențele dintre cele două tehnici utilizate:

Click pe mine! var b = document.getElementById("mybutton"); b.onclick = function() ( alert("Multumesc ca ai dat clic pe mine!"); ); b.addEventListener(„click”, function() (alerta(„Multumesc din nou!”)), false);

Apelarea metodei addEventListener() cu șirul „click” ca prim argument nu afectează valoarea proprietății onclick. În fragmentul de mai sus, făcând clic pe butonul vor apărea două casete de dialog alert(). Dar, mai important, metoda addEventListener() poate fi apelată de mai multe ori și poate fi folosită pentru a înregistra mai multe funcții de gestionare pentru același tip de eveniment în același obiect. Când are loc un eveniment pe un obiect, toți handlerii înregistrați pentru acel tip de eveniment vor fi apelați, în ordinea în care au fost înregistrați.

Apelarea metodei addEventListener() de mai multe ori pe același obiect cu aceleași argumente nu are niciun efect - funcția de gestionare este înregistrată o singură dată, iar apelurile repetate nu afectează ordinea în care sunt apelați handlerii.

Împreună cu metoda addEventListener() este metoda removeEventListener(), care ia aceleași trei argumente, dar în loc să adauge, elimină o funcție de gestionare a obiectului. Acest lucru este adesea util atunci când trebuie să înregistrați un handler de evenimente temporar și apoi să îl eliminați la un moment dat.

Versiunile de Internet Explorer anterioare decât IE9 nu acceptă metodele addEventListener() și removeEventListener(). IE5 și mai târziu definesc metode similare, attachEvent() și detachEvent() . Deoarece modelul de evenimente IE nu acceptă o fază de interceptare, metodele attachEvent() și detachEvent() acceptă doar două argumente: tipul evenimentului și funcția handler, primul argument trecând numele proprietății handlerului prefixat cu „on” metode în IE, mai degrabă decât evenimentele de tip fără acest prefix.

Apelarea gestionarilor de evenimente

Odată ce înregistrați un handler de evenimente, browserul web îl va apela automat atunci când apare un eveniment de tipul specificat pe obiectul specificat. Această secțiune detaliază ordinea în care sunt apelați handlerii de evenimente, argumentele pentru handler, contextul apelului (valoarea acestuia) și scopul valorii returnate a handler-ului. Din păcate, unele dintre aceste detalii diferă între versiunile IE 8 și mai mici și alte browsere.

Argumentul de gestionare a evenimentelor

Când este invocat un handler de evenimente, de obicei (cu o singură excepție, discutată mai jos) obiectul eveniment este trecut ca un singur argument. Proprietățile unui obiect eveniment conțin informații suplimentare despre eveniment. Proprietatea type, de exemplu, determină tipul de eveniment care a avut loc.

În IE versiunea 8 și mai jos, handlerelor de evenimente înregistrate prin setarea unei proprietăți nu primesc un obiect eveniment atunci când sunt apelați. În schimb, obiectul eveniment este stocat în variabila globală window.event. Pentru portabilitate, handlerii de evenimente pot fi stilați după cum urmează, astfel încât să utilizeze variabila window.event atunci când sunt apelați fără un argument:

Obiectul eveniment este transmis manevrerilor de evenimente înregistrați cu metoda attachEvent(), dar aceștia pot folosi și variabila window.event.

Când înregistrați un handler de evenimente folosind un atribut HTML, browserul convertește un șir de cod JavaScript într-o funcție. Alte browsere decât IE creează o funcție cu un singur argument, eveniment. IE creează o funcție care nu acceptă argumente. Dacă utilizați identificatorul de eveniment în astfel de funcții, acesta se va referi la window.event. În ambele cazuri, handlerii de evenimente definiți în marcajul HTML pot face referire la un obiect eveniment folosind identificatorul de eveniment.

Context handler de evenimente

Când un handler de evenimente este înregistrat prin setarea unei proprietăți, arată ca definirea unei noi metode de element de document:

E.onclick = function() ( /* implementare handler */ );

Prin urmare, nu este surprinzător faptul că handlerii de evenimente sunt invocați (cu o excepție în ceea ce privește IE, care este descrisă mai jos) ca metode ale obiectelor în care sunt definite. Adică, în corpul handler-ului de evenimente, cuvântul cheie this se referă la ținta evenimentului.

În handlere, cuvântul cheie this se referă la obiectul țintă, chiar și atunci când au fost înregistrate folosind metoda addEventListener(). Totuși, din păcate, acesta nu este cazul metodei attachEvent(): handlerele înregistrate cu metoda attachEvent() sunt chemați ca funcții, iar în ele cuvântul cheie this se referă la obiectul global (Window). Această problemă poate fi rezolvată în felul următor:

/* Înregistrează funcția specificată ca un handler de evenimente de tipul specificat în obiectul specificat. Se asigură că handlerul va fi apelat întotdeauna ca metodă pe obiectul țintă. */ function addEvent(target, type, handler) ( if (target.addEventListener) target.addEventListener(type, handler, false); else target.attachEvent("on" + type, function(event) ( // Apelați handler-ul ca metodă țintă, // și transmiteți-i un obiect de eveniment return handler.call(țintă, eveniment); )); )

Rețineți că handlerele de evenimente înregistrate în acest mod nu pot fi înlăturate deoarece referința la funcția wrapper transmisă metodei attachEvent() nu este stocată nicăieri, astfel încât să poată fi transmisă metodei detachEvent().

Valorile returnate de handler

Trebuie luată în considerare valoarea returnată de un handler de evenimente înregistrat prin setarea unei proprietăți obiect sau de un atribut HTML. De obicei, returnarea false îi spune browserului că nu ar trebui să efectueze acțiunile implicite pentru acest eveniment.

De exemplu, handlerul onclick al unui buton de trimitere a formularului poate returna false pentru a împiedica browserul să trimită formularul. (Acest lucru poate fi util dacă introducerea utilizatorului nu reușește validarea pe partea clientului.) În mod similar, gestionarea evenimentelor onkeypress al unui câmp de intrare poate filtra introducerea de la tastatură, returnând false atunci când sunt introduse caractere nevalide.

De asemenea, importantă este valoarea returnată de handlerul onbeforeunload al obiectului Window. Acest eveniment este generat atunci când browserul navighează la o altă pagină. Dacă acest handler returnează un șir, acesta va fi afișat într-o casetă de dialog modală, solicitând utilizatorului să confirme că dorește să părăsească pagina.

Este important de înțeles că valorile returnate ale handlerelor de evenimente sunt numărate numai dacă handlerii sunt înregistrate prin setarea proprietăților. Handlererii înregistrați cu addEventListener() sau attachEvent() trebuie să apeleze metoda preventDefault() sau să seteze proprietatea returnValue a obiectului eveniment.

Anularea evenimentelor

Valoarea returnată de un handler de evenimente înregistrat ca proprietate poate fi folosită pentru a suprascrie acțiunile implicite ale browserului în cazul acelui eveniment. În browserele care acceptă metoda addEventListener(), acțiunile implicite pot fi, de asemenea, suprascrise prin apelarea metodei preventDefault() a obiectului eveniment. Cu toate acestea, în IE versiunea 8 și mai jos, același efect este obținut prin setarea proprietății returnValue a obiectului eveniment la false.

Următorul fragment demonstrează un handler de evenimente clic pe hyperlink care utilizează toate cele trei metode de anulare a evenimentului (blochând utilizatorul să urmărească linkul):

Window.onload = function() ( // Găsiți toate linkurile var a_href = document.getElementsByTagName("a"); // Adăugați un handler de evenimente clic (nu pentru IE

Proiectul curent al modulului DOM Events 3 definește o proprietate pe obiectul Eveniment numită defaultPrevented. Nu este încă acceptat de toate browserele, dar esența sa este că în condiții normale este fals și devine adevărat numai dacă este apelată metoda preventDefault().

Anularea acțiunilor implicite asociate unui eveniment este doar un tip de anulare a unui eveniment. De asemenea, este posibil să opriți răspândirea evenimentului. În browserele care acceptă metoda addEventListener(), obiectul eveniment are o metodă stopPropagation(), care, atunci când este apelată, oprește propagarea ulterioară a evenimentului. Dacă alți handler pentru acest eveniment sunt înregistrați pe același obiect țintă, atunci cei rămași handlere vor fi apelați în continuare, dar niciun alt handler de eveniment de pe alte obiecte nu va fi apelat după ce metoda stopPropagation() este apelată.

În IE versiunea 8 și mai jos, metoda stopPropagation() nu este acceptată. În schimb, obiectul eveniment din IE are o proprietate cancelBubble. Setarea acestei proprietăți la true împiedică propagarea evenimentului.

Proiectul actual al specificației DOM Events 3 definește o altă metodă pe obiectul Event, o metodă numită stopImmediatePropagation(). La fel ca metoda stopPropagation(), împiedică propagarea evenimentului la orice alte obiecte. Dar, în plus, împiedică, de asemenea, apelarea oricărui alt handler de evenimente înregistrat pe același obiect.

Una dintre cele mai importante caracteristici ale limbajului JavaScript, care este probabil cea principală în acest limbaj, este capacitatea de a procesa unele evenimente. Această caracteristică este o caracteristică pentru JavaScript în comparație cu alte limbaje de programare web, deoarece numai acest limbaj poate face acest lucru.

Ce este un eveniment și gestionatorii de evenimente

Un eveniment este o acțiune care poate fi efectuată fie de utilizator, fie de alte obiecte din pagină.

Cel mai izbitor exemplu de eveniment este utilizatorul care face clic pe un obiect ( clic), fie că este un buton, un link sau orice alt element. Un alt exemplu de eveniment este trecerea mouse-ului peste un obiect ( mouse-ul peste), spune deasupra imaginii. De asemenea, evenimentul este încărcarea completă a paginii( sarcină). În general, toate acțiunile care au loc pe site sunt evenimente.

Așadar, putem captura orice eveniment care apare pe pagină și îl putem procesa folosind handlerul corespunzător. De exemplu, când treceți mouse-ul peste un bloc div, putem afișa un anumit mesaj, de exemplu, „Sunteți în zona de text”. Sau, când faceți clic pe un buton, ascundeți un bloc din pagină. În general, se pot face o mulțime de lucruri înainte de procesarea unui eveniment.

Și pentru a procesa un eveniment, trebuie să utilizați un handler special pentru acest eveniment. Fiecare eveniment are propriul său handler, de exemplu, evenimentul click( clic) există un handler onclick. Evenimentul mouse-ului peste un obiect ( mouse-ul peste) există un handler onmouseover. Și evenimentul de încărcare completă a paginii ( sarcină) există un handler onload.

Adică, după cum înțelegeți, numele handlerului este format din prefixul „on” + numele evenimentului.

O listă completă a evenimentelor și a gestionatorilor poate fi găsită în cartea de referință; în acest articol vom lua în considerare numai cele care sunt cele mai des utilizate.

Managerul de evenimente este apelat ca un atribut în cadrul etichetei elementului HTML în sine. Puteți scrie imediat cod JavaScript în valoarea handlerului, dar este mai bine să apelați o funcție care va efectua acțiunile necesare. Funcția trebuie să fie descrisă în interiorul unei etichete de script, care poate fi localizată fie în interiorul blocului cap, fie la sfârșitul etichetei body. Cuvântul this, adică obiectul curent, este transmis ca parametru acestei funcții.

Acum să scriem un exemplu simplu. Când treceți mouse-ul peste un bloc cu text, vom afișa un mesaj folosind metoda de alertă care indică faptul că utilizatorul se află în zona de text.

Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și de tipărire. Lorem Ipsum a fost textul fals standard al industriei încă din anii 1500, când o imprimantă necunoscută a luat o bucătărie de tipărire și a amestecat-o pentru a face o carte cu specimene de tipar.

Div( padding-stânga: 50px; lățime: 200px; chenar: 1px solid #000; )

Cod JavaScript:

Funcție blockOver(block)( alert("Sunteți în zona de text "); )

Salvăm documentul, îl deschidem în browser, plasăm cursorul mouse-ului peste text și vedem rezultatul procesării acestui eveniment:

Cum să obțineți valoarea unui atribut în javascript?

Folosind parametrul funcției (aceasta), puteți obține valoarea unui atribut al obiectului curent, de exemplu, aflați id-ul acestuia.

De exemplu, să creăm un buton și să-i dăm un id cu valoarea „justButton”. Când facem clic pe acest buton, vom afișa următorul mesaj: „Ați făcut clic pe butonul cu identificatorul value_id.” Aici trebuie să utilizați deja handlerul onclick.

Cod JavaScript:

Funcția clickOnButton(button)( alert("Ați făcut clic pe un buton cu identificatorul: " + button.id); )

Salvați documentul, deschideți-l în browser și faceți clic pe butonul.

În același mod, puteți afișa numele butonului ( butonul.nume) sau valoarea acestuia ( buton.valoare)

Obținerea lățimii și înălțimii unui element

De asemenea, puteți afla valorile proprietăților CSS ale unui element, de exemplu, lățime și înălțime. Proprietățile clientWidth și offsetWidth sunt folosite pentru a obține lățimea, iar proprietățile clientHeight și offsetHeight sunt folosite pentru a obține înălțimea. De exemplu, să afișăm lățimea și înălțimea butonului pe care s-a făcut clic.

Acum, conținutul funcției clickOnButton va fi astfel:

Funcția clickOnButton(button)( //alert("Ați făcut clic pe un buton cu ID: " + button.id); var width = button.clientWidth || button.offsetWidth; var height = button.clientHeight || button.offsetHeight; alert("Lățimea butonului: " + lățime + "\nÎnălțimea butonului: " + înălțimea); )

Rezultatul acestui exemplu:

Permiteți-mi să vă reamintesc că lățimea elementului este calculată împreună cu valoarea de umplutură, deci este egală cu 111px [ 99px(width) + 6px(padding-left) + 6px(padding-right) ].

Dacă nu aveți nevoie să scrieți mult cod pentru a procesa un eveniment, puteți scrie acest cod direct în valoarea handlerului. Adică, în loc să apelăm o funcție, scriem imediat codul necesar.

De exemplu, când se încarcă o pagină, puteți afișa un mesaj că „pagina se încarcă”. Pentru a face acest lucru, trebuie să utilizați evenimentul de încărcare și handlerul său de încărcare. Vom scrie acest handler în eticheta body de deschidere.

Această metodă poate fi utilizată numai dacă este necesară o singură linie scurtă de cod pentru a procesa evenimentul. În caz contrar, dacă codul de procesare constă dintr-o linie lungă sau mai multe linii, atunci trebuie să utilizați o funcție.

Și la sfârșitul acestui articol, ne vom uita la un exemplu simplu de procesare a formularelor. Procesarea formularului în JavaScript, în primul rând, reduce sarcina pe server și, în al doilea rând, oferă un avantaj suplimentar utilizării site-ului.

Formularul constă dintr-un câmp de conectare și un buton de trimitere. La trimiterea formularului, vom verifica lungimea de conectare. Lungimea sa trebuie să fie mai mare de trei caractere.

Să începem cu structura HTML a acestui formular.

Acum, să adăugăm un handler onsubmit pentru evenimentul de trimitere ca atribut etichetei de formular. În felul următor:

Evenimentul de trimitere se declanșează atunci când formularul este trimis. Am scris declarația de returnare pentru a preveni trimiterea formularului dacă este detectată o eroare în introducerea datelor. Dacă funcția returnează false, atunci valoarea handler-ului onsubmit va fi „return false”, ceea ce înseamnă că formularul nu va fi trimis la server. În caz contrar, dacă formularul returnează true, atunci valoarea handlerului va fi „return true” și formularul va fi trimis fără probleme.

Uneori este necesar să dezactivați complet trimiterea formularelor, caz în care valoarea handler-ului onsubmit va fi astfel:

Onsubmit = "checkForm(this); return false;"

După cum probabil ați ghicit deja, checkForm este numele funcției care va fi apelată atunci când se declanșează evenimentul de trimitere. Îl puteți numi cum doriți, urmând convențiile de denumire a funcției.

Și așa, să revenim la exemplul nostru. Acum trebuie să descriem funcția checkForm. Va contine urmatoarea conditie: daca lungimea autentificarii este mai mica de trei caractere, atunci returnam false si formularul nu va fi trimis, in caz contrar, daca datele au fost introduse corect, atunci trimitem formularul catre server.

Funcția checkForm(form)( //Obțineți valoarea câmpului formular al cărui nume este login var login = form.login.value; //Verificați dacă lungimea de conectare este mai mică de trei caractere, apoi afișați un mesaj de eroare și anulați trimiterea form. if(login .length > 3)( alert("Lungimea autentificarii trebuie sa fie mai mare de trei caractere"); return false; )else( return true; ) )

Salvăm documentul, îl deschidem în browser și îl testăm.

În acest fel, puteți verifica formularul în JavaScript și anula trimiterea lui în cazul unei erori.

Ei bine, asta e tot, dragi cititori. Să rezumam.
Evenimentele sunt folosite foarte des, așa că trebuie să poți lucra cu ele 100%.

În acest articol ați aflat ce sunt un eveniment și un handler de evenimente. Ați învățat cum să obțineți valorile atributelor elementului și cum să găsiți lățimea și înălțimea unui element. De asemenea, ați învățat cum să efectuați validarea formularelor.

Sarcini

Creați un calculator simplu pentru adăugarea numerelor.

Creați un formular cu două câmpuri numerice (type="number") pentru introducerea numerelor și un buton etichetat „Adăugați”
Când faceți clic pe butonul de trimitere, apelați funcția pentru procesarea acestui eveniment.
În interiorul funcției, obțineți valorile câmpului și, folosind metoda de alertă, afișați rezultatul adunării numerelor introduse.
Asigurați-vă că formularul nu este trimis după ce faceți clic pe butonul.

onClick este evenimentul numărul 1 pe ecranul utilizatorului.
onСlick este un clic (sau clic) al utilizatorului pe un obiect.
După ce fiecare astfel de utilizator face clic, pe ecran ar trebui să apară o acțiune de răspuns. Acest lucru asigură interactivitatea interfeței și confirmă principiul principal de comunicare între un computer și o persoană - faceți clic, răspundeți, faceți clic, răspundeți.
În jargonul utilizatorului, evenimentul onСlick poate fi numit orice doriți. De îndată ce utilizatorii obișnuiți nu numesc acest sărac onClick - faceți clic, trageți, faceți clic, faceți clic, bang etc. ... Dar esența acestui lucru nu s-a schimbat de ani de zile - dacă utilizatorul este activ pe ecran și face clic pe un obiect, atunci computerul trebuie să răspundă în mod adecvat la el (utilizatorul). Acesta este onСlick.

onclick în HTML

Evenimentul onClick este de o importanță capitală în orice limbă. Și HTML nu face excepție de la asta. Este cunoscut. Într-adevăr, dacă după ce faceți clic (onСlick) pe un element nu se întâmplă nimic în browser, atunci de ce să vă deranjați să programați ceva pe site? Așadar, onСlick este un invitat binevenit pe orice ecran de Internet (sau mic ecran).
Acum, mai aproape de subiect. Mai precis, onClick-ul nostru pe o pagină de site din browser este un eveniment dintr-un script Java, pentru care HTML servește doar ca cadru pentru plasarea codului constructelor sale. Și, din punctul de vedere al validității codului acestui HTML, ar fi corect să scrieți onclick și nu onСlick (cum sunt obișnuiți mulți programatori de aplicații). Pentru că în HTML toate etichetele și structurile sunt scrise doar cu litere mici.

Nu există litere mari în HTML. Nu, asta e tot! Și pentru acei „răi” care scriu în HTML cu majuscule, în vremurile bune era obișnuit să le taie mâinile până la genunchi. În plus. Se spune că sub părintele țar Ivan cel Groaznic, pentru scris în HTML, așa ceva te-ar putea pune cu ușurință, dacă nu te trage în țeapă, atunci pe spânzurătoare. Acest lucru este absolut exact. Chiar acum, desigur, curtenii și conducătorii au devenit mai calmi. Cu toate acestea, atunci când scrieți orice cod, trebuie să observați cel puțin aspectul decenței. Din acest loc începe povestea despre onclick-ul corect.

Deci, este decis și dovedit (pentru HTML).
În primul rând, scriem onclick, nu onСlick!!!

MENIU Nr. 1
sau
MENIU Nr. 1

Ne vom da seama ce înseamnă aceste replici nebunești puțin mai târziu, dar deocamdată...
- În principiu, evenimentul onclick dintr-un script Java în HTML poate fi atașat la orice element de cod al unei pagini HTML, fie că este ,

Sau . Browserul va „devora” totul și totul va funcționa. Singurul lucru este că accesul la un element de la tastatură este posibil doar pentru un obiect link sau buton. Și, dacă presupunem pentru o clipă că utilizatorul nu are mouse și lucrează exclusiv cu tastatura, atunci tot ceea ce va putea atinge pe site vor fi doar butoane sau link-uri. Nu există a treia! Prin urmare, „atașarea” evenimentului onclick la obiecte care nu sunt accesibile de la tastatură este pur și simplu urâtă. Ei bine, nu uman, cumva. Aceasta aduce a doua regulă pentru onclick în HTML - acest eveniment trebuie conectat doar la un link (eticheta „a”) sau la un buton (eticheta „button”). În caz contrar, codul va funcționa în continuare, dar la naiba, o tigaie mare separată a fost pregătită pentru astfel de programatori.
Deoarece formatarea (în HTML) și lucrul cu butoane („pâini”) provoacă anumite dificultăți, singurul, universal și cea mai bună opțiune rămâne doar linkul (eticheta „a”). Dar chiar și cu această etichetă, nu totul este atât de simplu. Acum, să revenim la analiza cu linia noastră de cod:

MENIU Nr. 1

Aruncăm linkurile de titlu din discuție ca fiind un lucru complet evident. Rămâne
MENIU Nr. 1
Toate scrierile ulterioare vor fi legate de subiectul blocării atributului href, care trebuie să fie „paralizat” în mod corespunzător, astfel încât linkul să înceteze să mai fie un link de lucru, dar să îndeplinească totuși funcțiile onclick .

returnează fals;

return false; - Aceasta este o blocare directă a atributului href. Dacă utilizatorul are scriptul Java activat în browserul său, evenimentul onclick va fi apelat din scriptul corespunzător, mai degrabă decât să urmeze linkul. Adică, astfel încât atunci când dați clic pe „link-ul de apel” să nu existe o tranziție imediată la adresa din href, evenimentul de returnare fals este adăugat la onclick; și se presupune că mai întâi va fi executată o funcție care va anula legătura dacă javascript este activat. Astfel, conținutul atributului href nu are sens deoarece este ignorat atunci când este executat scriptul java.

Dar aici este întrebarea. Ce se întâmplă dacă utilizatorul are script-ul Java dezactivat (dezactivat) în browser-ul său? Cum se va comporta linkul nostru atunci? Nu te voi intriga, dar o voi posta imediat opțiuni posibile evoluții ale evenimentelor - valori posibile ale atributului href și comportamentul corespunzător al browserului după ce faceți clic pe un astfel de link atunci când scriptul Java este dezactivat.
Desigur, dacă javascript este dezactivat în browserul utilizatorului, aceasta este o problemă și o pacoste. Dacă execuția scripturilor Java este dezactivată (interzisă) în browserul utilizatorului, atunci problemele continue încep cu atributul href, deoarece eticheta „a” este încă un link și browserul va încerca să navigheze la ea.

Nu puteți elimina complet atributul href din link. Este imposibil să te descurci fără atributul href din textul linkului și orice validator va fi imediat jignit pentru un astfel de ultraj împotriva corpului ei picant și delicat. Aceasta înseamnă că mai rămâne o singură opțiune - să umple atributul href cu conținut digerabil. Aici este posibil: lăsați href complet gol, completați-l cu un semn ascuțit „#” sau expresie javascript://. Când scriptul Java este dezactivat (sau scăpat), după ce faceți clic pe astfel de link-uri se va întâmpla următoarele:

Testare Atributul href este gol. După ce faceți clic pe un astfel de link, pagina din browser se va reîncărca pur și simplu. Exemplu Atributul href are valoarea „#”. După ce face clic pe un astfel de link, utilizatorul va fi aruncat în partea de sus a paginii, fără a-l reîncărca. Încerca Atributul href are valoarea „javascript://”. După ce faceți clic pe un astfel de link, nu se va întâmpla nimic. href="javascript://" - făcând clic pe link va fi pur și simplu ignorat de browser. Valoarea „javascript://” pentru atributul href este un „stub” standard pentru blocarea unui link atunci când scriptul Java este dezactivat.

href="javascript://" - prostii!

De ce prostii? Pentru că, viața pe internet în lume motoare de căutareîși face propriile ajustări. Din punct de vedere corect și semantic! layout, ar fi absolut logic să scrieți un link real în atributul href și să adăugați un titlu real pentru acest link. Apoi, după ce faceți clic pe un astfel de link, se va întâmpla unul dintre cele două lucruri: fie va fi executat evenimentul onclick din scriptul Java corespunzător, fie va avea loc o tranziție prin linkul real către pagina reala, (dacă scriptul Java este dezactivat sau glitched/subîncărcat).

Deci, să rezumam. În linkul pentru apelarea evenimentului Java script, în href plasăm un link real către pagina reală la care să navigăm când javascript este dezactivat, iar în onclick - o funcție care apelează o solicitare de a executa scriptul când Javascript este pornit .

Cu alte cuvinte, „href” ar trebui să conțină un link complet normal și funcțional către orice pagină web către care utilizatorul va fi redirecționat atunci când face clic pe „linkul de apel la eveniment” oprit Script Java și care va fi ignorat de script când inclus Script Java. Asta e tot …

Ei bine, până la urmă -

Verificarea browserului pentru a-l activa/dezactiva scriptul Java

Codul standard pentru o astfel de verificare arată astfel:
Ai javascript dezactivat...
Unde, pentru că puteți scrie orice stil în CSS, cu excepția display:none; și stiluri similare... Un browser este un MUST!!! va afișa acest mesaj pe ecran dacă utilizatorul dezactivează scriptul Java în browserul său. În acest mod simplu, webmasterii scriu adesea: „Vă rugăm să activați javascript” sau afișați câteva imagini frumoase cu o cerere similară, sau altceva... În interiorul etichetei noscript Puteți plasa orice etichetă HTML. Și aceasta nu este o precauție inutilă. În ciuda faptului că acum nu este atât de ușor să găsești un site care să nu folosească javascript deloc.

Cel ce nu este cu noi este împotriva noastră
Problema cu scriptul Java dezactivat în browser poate fi, în general, rezolvată radical și radical. De exemplu, adăugați cod HTML5 în interiorul secțiunii, cum ar fi:

unde, http://mysite.ru/ este o pagină web către care este imediat redirecționată
utilizator când dezactivat în browser Script Java.

Salutări tuturor celor care doresc să înțeleagă funcționarea onclick(). Articolul de astăzi vă va ajuta să înțelegeți odată pentru totdeauna principiul de funcționare. al acestui manipulator evenimente și rezolvați exemplu concret onclick JavaScript, sau mai degrabă exemple.

Vă voi arăta mai multe moduri de a lucra cu acest instrument, vă voi explica avantajele și dezavantajele și, de asemenea, vă voi descrie Lucrul jQuery cu evenimentele. Acum să trecem la analiza materialului!

Atribuirea de gestionare a evenimentelor

Mai întâi, să ne uităm la partea teoretică a întrebării. Aproape toată lumea procesează scripturi pe paginile lor. Și, de obicei, acestea sunt evenimente diferite. Pentru ca toate aceste evenimente programate să se declanșeze, trebuie instalat un handler pentru ele.

Conform regulilor de scriere, toți handlerii includ „on+event name” în numele lor, care este observat în onclick(). În funcție de evenimentul selectat, procesarea va avea loc din cauza acțiuni diferite. În cazul nostru, când folosiți onclick(), vor fi executate doar acele evenimente care au fost cauzate de clicul stâng al mouse-ului.

Diferite moduri de a atribui un handler de evenimente

Astăzi, există mai multe opțiuni pentru introducerea unui handler pentru anumite evenimente sau evenimente în cod.

Utilizarea evenimentelor simple

Sa incepem cu varianta simpla, care constă în încorporarea onclick() în marcajul documentului html în sine. Arata cam asa:

După cum puteți vedea, când faceți clic pe butonul cu butonul stâng al mouse-ului, apare mesajul „Click-click!”. Aș dori să vă atrag atenția asupra unui mic, dar semnificativ detaliu. Puteți utiliza doar ghilimele simple ('') în interiorul unei alerte.

De asemenea, în în acest caz, poate fi folosit cuvânt cheie acest. Se referă la elementul curent și oferă toate metodele disponibile pentru acesta.

Click pe mine

Această linie de cod creează un buton cu textul „Click on me”. După apăsare, veți vedea un mesaj pe ecran: „„Apăsați!” Acesta va înlocui prenumele butonului.

Această metodă este, fără îndoială, foarte simplă. Cu toate acestea, este potrivit doar pentru sarcini similare, de ex. afișați mesaje sau executați comenzi simple.

Dacă este necesar să folosiți structuri ciclice, folosiți etichete etc., atunci aceasta metoda nu se potriveste. Acesta va reduce lizibilitatea codului și, de asemenea, îl va face voluminos și neglijent.

În acest caz, ar trebui să apelați la funcții.

Lucrul cu funcții

Funcțiile vă permit să vă separați codul necesarîntr-un bloc separat, care poate fi apelat ulterior printr-un handler de evenimente în .

De exemplu, am atașat o aplicație pentru a afișa utilizatorului numărul rezultat în diverse puteri, începând de la 1 și terminând cu 5. Pentru a face acest lucru, am creat o funcție countPow(), căruia i se pot transmite parametri. În aplicația mea, utilizatorul trebuie să introducă un număr ca variabilă de funcție.

Astfel, prin intermediul handler-ului asociat funcției sus-numite, au fost efectuate calcule și afișate pe ecran.

var rezultat =1; funcția countPow(n) ( for(var i=1; i