Js hover action. Controlul paginii web cu evenimente jQuery

SSH(Engleză Secure SHell - " carapace sigura») - protocol de rețea nivel de sesiune, permițând producerea telecomandă sistem de operareși tunelarea conexiunilor TCP (de exemplu, pentru transferuri de fișiere). Funcționalitatea este similară cu protocoalele Telnet și rlogin, dar, spre deosebire de acestea, criptează tot traficul, inclusiv parolele transmise. SSH permite alegerea diferiților algoritmi de criptare. Clienții SSH și serverele SSH sunt disponibile pentru majoritatea sistemelor de operare în rețea.

SSH permite practic orice alt protocol de rețea să fie transmis în siguranță într-un mediu nesigur. Astfel, nu puteți lucra doar de la distanță pe un computer prin intermediul shell de comandă, dar și transmite un flux audio sau video pe un canal criptat (de exemplu, de la o cameră web). SSH poate utiliza, de asemenea, comprimarea datelor transmise pentru criptarea lor ulterioară, ceea ce este convenabil, de exemplu, pentru lansare de la distanță Clienții X Window System.

Majoritatea furnizorilor de găzduire oferă clienților acces SSH la directorul lor principal contra cost. Acest lucru poate fi convenabil pentru ambii care lucrează Linie de comandași pentru lansarea de la distanță a programelor (inclusiv aplicații grafice).

Prima versiune a protocolului, SSH-1, a fost dezvoltată în 1995 de către cercetătorul Tatu Ulönen de la Universitatea de Tehnologie din Helsinki, Finlanda. SSH-1 a fost scris pentru a oferi mai multă confidențialitate decât protocoalele rlogin, telnet și rsh. În 1996, mai mult versiune sigură protocol, SSH-2, incompatibil cu SSH-1. Protocolul a câștigat și mai multă popularitate, iar până în 2000 avea aproximativ două milioane de utilizatori. În prezent, termenul „SSH” înseamnă de obicei exact SSH-2, deoarece prima versiune a protocolului din cauza dezavantaje semnificative acum practic nu este folosit.

O zi bună, abonați curioși și invitați de blog. Astăzi vă vom prezenta o secțiune utilă într-un limbaj de scripting bazat pe prototip, și anume evenimentul JavaScript mouseover.

Vreau să înțelegeți bine evenimente precum clic, sus, mouse-ul în jos, mouseover și altele, să înțelegeți diferența dintre ele și să învățați cum să le utilizați pentru a rezolva sarcinile la îndemână. Desigur, după fiecare material teoretic cheie, puteți găsi implementare software exemple. Ei bine, să începem!

Toate informațiile despre evenimentele mouse-ului

Există mai multe evenimente pentru mouse care acoperă în totalitate toate acțiunile posibile ale cursorului de pe pagină. Printre acestea se numără cele care sunt declanșate atunci când dați clic pe un obiect, treceți cu mouse-ul peste el sau mutați indicatorul de-a lungul deschide fereastra... Toate pot fi împărțite în două grupuri: evenimente simple și complexe (compozite).

Să începem simplu

În primul rând, să ne familiarizăm cu evenimente simple. Sunt doar cinci. Pentru comoditate, am inclus o descriere a fiecărui instrument în tabelul atașat mai jos.

Ei bine, acum, pentru a consolida materialul, să ne uităm la un exemplu. Am creat un mic program în care emoțiile emoji-ului se schimbă atunci când trec cu mouse-ul și mișc cursorul.

Mutați cursorul mouse-ului peste imagine și aceasta se va schimba.

Acum ia-l deoparte și urmărește schimbările

E timpul să ne grupăm

Acum să trecem la vederi complexe. Fiecare dintre aceste evenimente include mai multe evenimente simple. În acest caz, toate componentele unui eveniment complex nu se declanșează simultan, ci se aliniază. Prin urmare, este posibil să observați uneori o astfel de situație în care, atunci când faceți clic rapid pe, de exemplu, elemente de meniu de pe un site web, să nu funcționeze uneori.

De ce este așa? Răspunsul este destul de simplu.

Procesarea evenimentelor are loc la o anumită viteză maximă. Și, în același timp, nu uitați că evenimentele sunt procesate pe rând. Aceasta înseamnă că dacă apăsați prea repede elemente diferite este posibil ca lanțul de procesare să nu se finalizeze.

După cum ați înțeles deja, evenimentele complexe simplifică oarecum viața dezvoltatorilor, inclusiv un set de evenimente simple necesare simultan. Drept urmare, astăzi nimeni nu își poate imagina prelucrare de rutină butoane sau alte elemente fără același clic.

Pentru familiarizarea practică cu funcționarea evenimentelor enumerate mai sus, am modificat aplicația anterioară... Analizați rezultatul muncii mele.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Faceți clic pe mine o dată și zâmbetul va zâmbi! Acum dă clic pe mine dublu click iar smiley-ul va începe să se miște! Dacă doriți să reveniți la starea inițială, atunci faceți clic dreapta pe mine!

După cum puteți vedea, totul este foarte simplu. Aceste elemente sunt ușor de apelat în cod și le leagă de acțiuni specifice.

Evenimente JQuery ajuta la realizarea paginilor web interactive, raspunzand la cele mai simple actiuni ale utilizatorului. Evenimentele reprezintă momentul exact în care se întâmplă ceva, cum ar fi un clic de mouse.

Se numește momentul în care a avut loc evenimentul prin declanșarea unui eveniment... Evenimentele pot fi declanșate la efectuarea diferitelor operațiuni pe pagina web. În plus, browserul în sine poate deveni sursa evenimentelor.

Controlul paginii web cu evenimente jQuery

1. Evenimente mouse

.click ()
Acest eveniment se declanșează când apăsați și eliberați butonul mouse-ului. Se aplică link-urilor, imaginilor, butoanelor, paragrafelor, blocurilor etc.

.dblclick ()
Evenimentul este declanșat atunci când faceți dublu clic și eliberați butonul mouse-ului, de exemplu, deschideți un folder pe desktop.

.mousedown ()
Evenimentul are loc atunci când butonul mouse-ului este apăsat, de exemplu, când trageți elemente.

.mousemove ()
Evenimentul este declanșat când mutați mouse-ul peste pagină.

.mouseout ()
Evenimentul este declanșat atunci când mutați mouse-ul departe de element.

.mouse-ul peste ()
Evenimentul se declanșează atunci când treceți cu mouse-ul peste un element (similar cu utilizarea pseudo-clasei: hover).

.mouseup ()
Evenimentul se declanșează când eliberați butonul mouse-ului.

2. Evenimente document / fereastră

.sarcină ()
Evenimentul este declanșat atunci când browserul a încărcat toate fișierele paginii web: fișiere html, css externși fișiere javascript, fișiere media. Acest lucru poate fi incomod dacă pagina web conține un numar mare de fișiere. Pentru a rezolva această problemă, puteți utiliza funcția ready (), care rulează scripturi imediat după încărcarea codului html.

.redimensionare ()
Evenimentul se declanșează când redimensionați fereastra browserului.

.sul ()
Evenimentul este declanșat atunci când utilizați barele de defilare sau derulați pagina web cu rotița mouse-ului sau utilizați tastele de la tastatură în aceste scopuri (pg up, pg dn, home, end).

.descărcare ()
Evenimentul este declanșat atunci când sunteți pe cale să părăsiți pagina, faceți clic pe un link pentru a merge la o altă pagină, închideți fila paginii sau închideți fereastra browserului.

3. Formează evenimente

.blur ()
Evenimentul este declanșat atunci când câmpul formularului nu este focalizat, de exemplu. ați introdus date într-un câmp de formular și ați trecut la altul.

.Schimbare ()
Evenimentul este declanșat atunci când starea unui câmp de formular se schimbă, de exemplu, atunci când un articol este selectat dintr-un meniu derulant.

.focus ()
Evenimentul este declanșat atunci când navigați la un câmp de formular făcând clic pe butonul sau fila mouse-ului.

.resetare ()
Evenimentul vă permite să readuceți formularul la starea inițială, anulând modificările efectuate.

.Selectați ()
Evenimentul se declanșează atunci când selectați textul din interior casetă de text forme.

.Trimite ()
Evenimentul este declanșat atunci când trimiteți un formular completat făcând clic pe butonul Trimitere sau apăsând tasta Enter în timp ce cursorul este poziționat într-o casetă de text.

4. Evenimente de la tastatură

.Tasta în jos ()
Evenimentul este declanșat atunci când este apăsată o tastă, înainte de evenimentul de apăsare a tastei.

.apăsare taste ()
Evenimentul este declanșat atunci când apăsați o tastă până când o eliberați.

.keyup ()
Evenimentul este declanșat atunci când eliberați cheia.

5. Evenimente jQuery

.hover ()
Această funcție funcționează ca un eveniment, permițându-vă să rezolvați simultan două probleme legate de evenimentul mouse-ului peste și evenimentul de înlăturare a mouse-ului în raport cu obiectul selectat. Structura principală a funcției:
$ ("selector #"). hover (funcția1, funcția2);

.comutare ()
Evenimentul funcționează similar cu evenimentul hover (), cu diferența că evenimentul este declanșat de un clic de mouse. De exemplu, puteți deschide un meniu drop-down cu un singur clic și puteți ascunde cu o secundă.

6. Obiect eveniment

Când se declanșează un eveniment, browserul stochează informații despre acesta în obiect eveniment... Obiectul eveniment conține datele colectate în momentul în care a avut loc evenimentul. Evenimentul este gestionat folosind o funcție, iar obiectul este transmis funcției ca argument - variabila evt (puteți folosi și eveniment sau doar e ca nume de variabilă). Pentru a accesa argumentul, trebuie să adăugați numele parametrului la funcție. În cadrul acestei funcții, puteți accesa diverse proprietăți folosind sintaxa punctului. Când funcția este apelată, obiectul eveniment este stocat în variabila evt.
Obiectul eveniment are proprietăți diverse, cele mai frecvente sunt descrise în tabelul de mai jos.