Jquery. Eveniment de trecere cu mouse-ul. Evenimente cu mouse-ul în jos, sus și clic

Pe măsură ce continuăm explorarea jQuery, să trecem la explorarea subiectului gestionării evenimentelor în jQuery.

Evenimente documentate
Evenimentele apar atunci când utilizatorul interacționează cu pagina web. Evenimentele sunt un fel de notificare din partea sistemului că utilizatorul a efectuat o acțiune sau că a apărut o anumită condiție în cadrul sistemului însuși. Evenimentele sunt declanșate făcând clic pe un element, mișcând mouse-ul, apăsând o tastă de la tastatură, redimensionând o fereastră, terminând încărcarea unei pagini web și multe altele. Știind ce evenimente poate genera acest sau acel element al paginii web, puteți scrie o funcție care să gestioneze acest eveniment. De exemplu, la trimiterea datelor din formular, evenimentul onsubmit este declanșat. Când apare acest eveniment, puteți verifica datele introduse de utilizator, iar dacă acestea nu se potrivesc cu cele așteptate, anulați trimiterea datelor.

La începutul cărții, am luat deja în considerare posibilitatea de a executa scripturi imediat după formarea structurii documentului, fără a aștepta încărcarea altor elemente. După cum știți deja, puteți gestiona acest eveniment folosind metoda ready ().

alertă („Documentul este disponibil pentru executarea scripturilor”);
});

Dacă trebuie să efectuați orice acțiune numai după sarcina completa documentul HTML în sine, precum și toate celelalte elemente (de exemplu, imagini), apoi puteți utiliza metoda de încărcare (). Sintaxa metodei este următoarea.

încărcare (Funcția suna inapoi)

funcţie<Название функции>([Obiect eveniment]) (
// ...
}

Să afișăm mesajul de confirmare și tipul de eveniment după ce pagina web este complet încărcată.

$ (fereastră) .încărcare (funcția (e) (
alertă („Documentul este încărcat complet”);
alertă („Tipul eveniment” + е.tip);
});

În urma execuției, vom primi două mesaje.

Documentul este complet încărcat
Încărcați tipul de eveniment

Metoda descărcare () este utilizată pentru a efectua orice acțiuni imediat înainte de descărcarea documentului. Metoda are următoarea sintaxă.
descărcare (funcție de apel invers)

Parametrul Funcție de apel invers specifică o referință de funcție în următorul format.

funcţie<Название функции>([<Объект event>]) {
// ...
}
Să afișăm mesajul înainte de a descărca documentul.
$ (fereastră) .descărcare (funcție ()
(alertă („IntrăMai mult!");
});

În această secțiune, vom analiza alte două metode utile.

redimensionare (Callback) - Se execută când fereastra este redimensionată.

scroll (Callback) - Se execută atunci când conținutul unei pagini, document, fereastră sau element cadru este derulat.

Parametrul Funcție de apel invers specifică o referință de funcție în următorul format.
funcția Nume funcție ([Obiect eveniment]) (
// ...
}

Puteți gestiona derularea conținutului ferestrei și puteți afișa un mesaj ca acesta.
$ (fereastră) .scroll (funcție () (
alertă („Defilarea conținutului ferestrei”);
});

Ca exemplu de utilizare a metodei redimensionare (), obțineți lățimea și înălțimea ferestrei după redimensionarea acesteia (Listing 6.1).

Lista 6.1. Afișarea lățimii și înălțimii ferestrei la redimensionare

Când fereastra este redimensionată în elementul cu identificatorul divl, vor fi afișate lățimea și înălțimea ferestrei.

Metoda de eroare (funcția Callback) este apelată atunci când există o eroare pe pagină sau în Cod JavaScript... Parametrul Funcție de apel invers specifică o referință de funcție în următorul format.

funcția Nume funcție ([Mesaj [, URL [, Număr linie]]]) (
// ...
}

Dacă eroarea a apărut în obiectul fereastră, atunci trei parametri vor fi disponibili în funcția de apel invers:

Mesaj - text care descrie eroarea;
URL este adresa URL completă a documentului de eroare.
Număr de linie - numărul de linie cu eroare.

A se ascunde erori JavaScript de la utilizatori, este necesar să returnați adevărat în interiorul funcției de apel invers.

$ (fereastră) .error (funcție () (
returnează adevărat;
});

Folosind metoda erorii (), puteți gestiona eroarea de încărcare a imaginii.

$ ("img"). eroare (funcție () (
$ (acest) .attr ("src", "noimage.gif");
});

Notă
Pentru lucru corect Pentru acest exemplu, trebuie să găzduiți scriptul pe server. În caz contrar, evenimentul nu va fi procesat.

Evenimente mouse în jQuery

Următoarele metode sunt furnizate pentru gestionarea evenimentelor mouse-ului în jQuery.

Faceți clic ([Callback]) - Se execută când se face clic pe un element sau pe o pagină web. Dacă parametrul nu este specificat, acesta va simula un clic pe element. Evenimentul onclick este precedat de două evenimente: onmousedown și onmouseup. Să afișăm un mesaj după ce facem clic pe orice buton.
$ ("ibutton") .click (funcție () (
});

Comutare () - Vă permite să alternați mai multe funcții atunci când faceți clic pe un element sau pe o pagină web. Funcțiile sunt apelate pe rând. Primul clic apelează prima funcție, a doua, a doua și a treia, a treia. Dacă a treia funcție nu este definită, atunci prima funcție este apelată din nou și așa mai departe. Metoda comutare () are următorul format.
comutare (<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])

Să modificăm culoarea textului paragrafului după fiecare clic de mouse.
$ ("p"). comutare
(funcția () (
$ (acest) .css („culoare”, „roșu”);
funcția () (
$ (acest) .css („culoare”, „albastru”);
funcția () (
$ (acest) .css („culoare”, „verde”);
}
) .click ();

Încercați să dați clic pe paragraf de câteva ori. Culoarea textului se va schimba succesiv de la roșu la albastru, de la albastru la verde, de la verde la roșu din nou. Acordați atenție ultimului rând al exemplului. După atribuirea unui handler de evenimente, evenimentul onclick este apelat folosind metoda click () fără parametri. Din acest motiv, culoarea paragrafului va fi roșie încă de la început.

Dblclick ([Funcția de apel invers]) - executat când dublu click pe un articol sau pe o pagină web. Dacă parametrul nu este specificat, acesta va simula un dublu clic pe element. Evenimentul ondblclick este precedat de trei evenimente: onmousedown, onmouseup și onclick. Să afișăm un mesaj când faceți dublu clic pe orice paragraf.
$ ("p"). dblclick (funcție () (
alertă („Ați făcut dublu clic”);
});

mousedown (Callback) - Execut atunci când butonul mouse-ului este apăsat pe un element sau pagină. Evenimentul onmousedown se declanșează înainte de evenimentele onmouseup și onclick.

mouseup (Callback) - Se execută când butonul mouse-ului apăsat anterior este eliberat. Evenimentul onmouseup se declanșează între evenimentele onmousedown și onclick. Să afișăm mesaje când facem clic și eliberăm butonul mouse-ului peste un paragraf.

$ ("p"). mousedown (funcție () (
$ ("# divl"). append ("Eveniment Onmousedown" + "
");
)). mouseup (funcție () (
$ ("# divl"). append ("Eveniment Onmouseup" + "
");
});
<р>Click pe mine

Mousemove - Execut ori de câte ori mouse-ul este mutat. Să afișăm un mesaj când deplasăm cursorul peste un paragraf.

$ ("p") .mousemove (funcție () (
$ ("# divl"). append ("Eveniment Onmousemove" + "
");
});

mouseover (Callback) - Se execută când mouse-ul trece peste element.

mouseout (Callback) - Se execută când cursorul mouse-ului părăsește elementul. Când treceți cu mouse-ul peste link, vom face culoarea linkului în roșu și vom afișa mesajul, iar când cursorul iese din link, îi vom schimba culoarea în negru și vom afișa mesajul.

$ ("a") .mouseover (funcție () (
$ (acest) .css („culoare”, „roșu”);
$ ("# divl"). anexează ("Evenimentla trecerea cu mouse-ul „+”
");
)). mouseout (funcție () (
$ (acest) .css („culoare”, „negru”);
$ ("# divl"). anexează ("Evenimentonmouseout „+”
");
}>;

Hover () - vă permite să gestionați flotarea și părăsirea unui element cu o singură metodă. Are următorul format.
hover (Callback pentru evenimentul onmouseover, Callback pentru evenimentul onmouseout)

Să refacem exemplul nostru anterior și să folosim metoda hover ().

$ ("a"). hover (funcție () (
$ (acest) .css („culoare”, „roșu”);
$ ("# divl"). append ("Eveniment la trecerea mouse-ului" + "
"); },
funcția () (
$ (acest) .css („culoare”, „negru”);
$ ("# divl"). append ("Eveniment Onmouseout" + "
");
});

Metoda hover () are un alt avantaj. Dacă în interiorul blocului există un alt bloc, atunci când intrați vor fi apelate funcții separate Unitate interioarăși, de asemenea, la ieșirea din el. Când utilizați metoda hover (), aceste mișcări vor fi ignorate (Listing 6.2).

Lista 6.2. Specificul utilizării metodei hover()

Selectatmanipulatorii:

Linia 1

Randul 2

Funcţiehover ():

Linia 1

Randul 2

Pentru primul bloc imbricat, am definit handlere de evenimente separate. Dacă mișcăm cursorul mouse-ului pe întregul bloc din mijloc, obținem următoarea secvență de evenimente.
Eveniment la trecerea mouse-ului
Eveniment Onmouseout
Eveniment la trecerea mouse-ului
Eveniment Onmouseout
Eveniment la trecerea mouse-ului
Eveniment Onmouseout

Pentru al doilea bloc imbricat, gestionatorii de evenimente sunt alocați folosind metoda hover (). Cu aceeași acțiune, vom obține doar două evenimente.
Eveniment la trecerea mouse-ului
Eveniment Onmouseout

În toate metodele prezentate în această secțiune, încă nu ne-am dat seama care sunt parametrii care le pot fi transmise.

// ...
}

Elementul care a generat evenimentul este accesibil în interiorul funcției prin intermediul acestui pointer. Rețineți că acest indicator se referă la element model de obiect document și nu pe un element de colecție jQuery. Dacă o variabilă este specificată în parametrul obiect eveniment, atunci prin intermediul acestuia puteți accesa proprietățile obiectului eveniment. Să scriem un handler de clic de mouse pentru două elemente simultan. Când este apăsat, afișați numele etichetei în elementul cu identificatorul divl.

$ ("p, div "). faceți clic (funcție (de ex) {
$ ("# divl")
.apend („Element„+ e.srcElement.tagName +”
");
});

Evenimente de la tastatură în jQuery

JQuery oferă următoarele metode pentru a gestiona evenimentele de la tastatură.

keydown - Se execută când este apăsată o tastă de la tastatură.

keyprcss (Funcția de apel invers) - Se execută atunci când este apăsată o tastă de la tastatură. La fel ca keydown (), dar returnează valoarea codului caracterului în Codificare Unicode... Evenimentul este generat continuu până când utilizatorul eliberează cheia.

keyup (funcția Callback) - Executat atunci când o tastă de la tastatură apăsată anterior este eliberată.

Ca parametru al funcției de apel invers, specificați o referință la o funcție în următorul format.

funcția Nume funcție ([Obiect eveniment]) (
// ...
}

Dacă o variabilă este specificată în parametrul obiect eveniment, atunci prin intermediul acestuia puteți accesa proprietățile obiectului eveniment. De exemplu, pentru a obține codul tastei apăsate, puteți utiliza proprietatea Key Code. De exemplu, să apasăm codul tastei și să demonstrăm succesiunea evenimentelor (Listing 6.3).

Lista 6.3. Evenimente de la tastatură

Evidențiați caseta de text și apăsați o tastă de pe tastatură. De exemplu, să apăsăm tasta A cu aspectul tastaturii rusești. Ca urmare, vom primi următorul mesaj.
apăsarea tastei 70
keyprcss 1072
tastare 7 0

Formează evenimente în jQuery

Următoarele metode sunt concepute pentru a gestiona evenimentele din formular.

focus ([Callback]) - executat atunci când elementul de formular primește focus. Dacă parametrul nu este specificat, atunci elementul va primi focalizarea de intrare.

estompare ([Callback]) - Se execută atunci când elementul formular pierde focalizarea. Dacă parametrul nu este specificat, atunci elementul va pierde focalizarea de intrare.

modificare (Callback) - Se execută atunci când datele din caseta de text se modifică și focalizarea se mută către alt element de formular sau când sunt trimise datele de formular.

submit ([Funcția de apel invers]) - Se execută atunci când datele din formular sunt trimise. Dacă parametrul nu este specificat, atunci va fi trimis formularul.

select ([Funcția de apel invers]) - Se execută când este selectat conținutul elementului. Dacă parametrul nu este specificat, atunci conținutul elementului va fi complet selectat.

Ca parametru al funcției de apel invers, specificați o referință la o funcție în următorul format.

funcția Nume funcție ([Obiect eveniment]) (
// ...
}

Elementul care a generat evenimentul este accesibil în interiorul funcției prin intermediul acestui pointer. Rețineți că acest indicator se referă la un element din modelul obiect document, nu la un element din colecția jQuery. Dacă o variabilă este specificată în parametrul obiect eveniment, atunci prin intermediul acestuia puteți accesa proprietățile obiectului eveniment.

Să demonstrăm cum să gestionăm diverse evenimente de formular (Listing 6.4).

Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4




!}

id = "btn2">

!}