###
  • Programe
  • Siguranță
  • Știri
  • Interesant
  • Sfat
  • Știri
  • Recenzii

    • Formează evenimente. Evenimente de formular Informații suplimentare despre eveniment

    07.09.2020 Știri

    Subiectul anterior a analizat evenimentele care apar atunci când sunt apăsate tastele. În acest subiect ne vom uita la alte evenimente de formă. Inclusiv trimiterea formularului către server.

    Element în focalizare

    Când un element de formular are focalizare, evenimentul de focalizare este declanșat, iar când elementul iese din focalizare, evenimentul de estompare este declanșat. Să creăm un câmp de intrare și să trimitem text în consolă atunci când primește focalizarea și când își pierde focalizarea:

    Cod HTML:

    Nu are rost să folosiți aceste evenimente pentru a schimba stilul unui element. Există o pseudo-clasă numită focus în CSS în acest scop.

    Introducerea unei valori

    Evenimentul de introducere are loc atunci când utilizatorul introduce text într-un câmp de introducere. Se declanșează atunci când fiecare caracter este adăugat sau eliminat, precum și atunci când textul este copiat în câmpul de introducere. În unele browsere, funcționează neobișnuit: de fiecare dată când este introdus un caracter, este ridicat un eveniment de estompare, apoi este executat gestionarea evenimentelor de intrare și apoi evenimentul de focalizare este ridicat. Dacă nu există gestionatori de evenimente de focalizare și estompare, atunci nu există nicio problemă. Dar dacă sunt, atunci se vor declanșa de fiecare dată când se adaugă un simbol.

    Să adăugăm o altă etichetă în pagină și să afișăm valoarea acesteia atunci când introducem text:

    Cod HTML:

    JavaScript:

    28
    29
    30
    31
    32

    		 var newv = document.getElementById("new_value"); newv.onchange = function () ( console.log ("Valoarea a fost schimbata in: "+newv.value); );
    Trimiterea unui formular

    Evenimentul de trimitere se declanșează atunci când formularul este trimis la server. Este folosit pentru a valida datele pe care utilizatorul le-a introdus în formular. Handler-ul verifică valorile elementelor formularului, iar dacă vreo valoare este introdusă incorect, formularul este anulat. Aceasta afișează de obicei un mesaj care indică ceea ce trebuie corectat.

    Să plasăm etichetele create în formular și să adăugăm un buton pentru a trimite formularul:

    Cod HTML:

    În exemplele anterioare, elementele formularului au fost deja găsite, astfel încât handlerul nu caută din nou.

    Dacă formularul este completat corect, adică toate câmpurile au cel puțin două caractere, atunci browserul va încerca să lanseze fișierul specificat în atributul acțiune și va apărea o eroare deoarece nu există un astfel de fișier. Dar nu există niciun risc în asta, așa că nu trebuie să vă fie frică să testați scenariul. Dacă într-unul dintre câmpuri sunt introduse mai puțin de două caractere, va apărea un mesaj și trimiterea va fi anulată. Dacă există o mulțime de cecuri, atunci puteți afișa un mesaj diferit pentru fiecare cec și puteți anula trimiterea formularului.

    Evenimentul de intrare se declanșează atunci când valoarea unui element , sau element a fost modificată.

    Bule Anulabil Interfață Proprietatea de gestionare a evenimentelor
    da
    Nu
    InputEvent
    GlobalEventHandlers.oninput
    HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("valori"); input.addEventListener("input", updateValue); funcția updateValue(e) ( log.textContent = e.target.value; ) Specificații rezultate Starea specificațiilor
    Standard de viață HTML
    		Nivel de trai
    Document Object Model (DOM) Nivelul 3 Specificații pentru evenimente
    Definiția „evenimentului de intrare” din specificația respectivă.    		 Învechit
    Compatibilitate browser

    Tabelul de compatibilitate din această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.

    Actualizați datele de compatibilitate pe GitHub

    Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android Webview Chrome pentru Android Firefox pentru Android Opera pentru Android Safari pe iOS Samsung Interneteveniment de intrare
    Chrome Suport complet DaEdge Suport complet 79 Suport complet 79 Fără suport 12 - 79

    Note

    Note Nu este acceptat pentru selectări , casete de selectare sau intrări radio.    		Firefox Suport complet DaIE Suport parțial 9

    În acest articol, ne vom uita la metodele pe care biblioteca jQuery le oferă dezvoltatorului web pentru gestionarea evenimentelor.

    Pentru lucrul cu evenimente în scripturi browser JavaScript furnizează un API (de exemplu, funcția addEventListener). Folosind această funcție, puteți specifica codul care urmează să fie executat atunci când browserul pentru un element specificat generează un eveniment specificat.

    Gestionarea evenimentelor folosind metode jQuery pe sintaxa funcției

    Înainte de a putea adăuga elemente de gestionare a evenimentelor, mai întâi trebuie să obțineți acele elemente. Puteți afla cum să găsiți elementele de care aveți nevoie pe o pagină în articolul jQuery - Selectarea elementelor.

    În jQuery, puteți atașa un eveniment (ascultător de evenimente) unui anumit element utilizând funcțiile on și one, precum și pe intrări scurte.

    // funcția pe .on(evenimente, handler); // funcția unu .one(evenimente, handler); // events - un eveniment sau o listă de evenimente separate printr-un spațiu, la apariția cărora este necesar să se execute un handler (handler) // handler - o funcție (event handler) // o scurtă descriere a funcției pe .organizatorul evenimentului); // event - numele evenimentului (poate fi folosit pentru a procesa numai acele evenimente pentru care a fost creată o astfel de intrare scurtă în jQuery)

    Funcția one diferă de on numai prin aceea că execută handlerul o singură dată când are loc evenimentul specificat.

    De exemplu, utilizați funcția on pentru a adăuga un eveniment clic pentru toate elementele cu clasa btn:

    // folosiți o funcție anonimă ca handler $(".btn").on("click", function() ( // acțiuni care vor fi efectuate când are loc evenimentul... console.log($(this). text( )); )); // folosiți o funcție obișnuită ca handler var myFunction = function() ( console.log($(this).text()); ) $(".btn").on("click", myFunction);

    Codul de mai sus, scris folosind prescurtarea funcției on:

    $(".btn").click(function() ( // acțiuni care vor fi efectuate când apare evenimentul... console.log($(this).text()); ));

    Informații suplimentare despre eveniment

    Când procesați un eveniment, puteți afla câteva informații suplimentare despre acesta. Transferul acestor informații, și anume obiectul Event, către handlerul de evenimente se realizează întotdeauna prin primul argument.

    $("#demo").on("click", function(e)( // e este un obiect Event care conține informații suplimentare despre evenimentul care a avut loc // proprietățile utilizate frecvent ale obiectului Eveniment e.preventDefault(); / / anulează acțiunea în mod implicit e.stopPropagation(); //stop event bubbleing // e.type – obține tipul evenimentului // e.target – link la elementul pe care a avut loc evenimentul // e.currentTarget – link la elementul curent (pentru care a fost declanșat handlerul). Această proprietate este de obicei egală cu funcția this. // e.currentTarget === this // e.which – codul tastei (pentru un mouse), butonul sau codul simbol (pentru o tastatură) //e.pageX, e.pageY – coordonatele cursorului relativ la colțul din stânga sus al documentului));

    Spațiu de nume

    În jQuery, după specificarea numelui evenimentului, puteți specifica suplimentar un spațiu de nume.

    De exemplu:

    // faceți clic pe evenimentul din spațiul de nume $("#demo").on("click.first",function())( console.log("1 click event handler"); )); // faceți clic pe eveniment în al doilea spațiu de nume $("#demo").on("click.second",function())( console.log("2 click event handler"); ));

    Spațiile de nume sunt un lucru foarte convenabil. Este folosit, de exemplu, atunci când trebuie să declanșați nu toate evenimentele, ci numai pe cele cu un anumit nume.

    // declanșează evenimentul clic în spațiul de nume mai întâi $("#demo").trigger("click.first"); // declanșează evenimentul click în al doilea spațiu de nume $("#demo").trigger("click.second");

    De asemenea, este foarte ușor să ștergeți anumite evenimente:

    //elimină manevrele de evenimente clic din primul spațiu de nume $("#demo").off("click.first"); //elimină manevrele de evenimente clic din al doilea spațiu de nume $("#demo").off("click.second");

    Descrierile și exemplele de utilizare a funcțiilor de declanșare și oprire sunt discutate în articol puțin mai jos.

    Transmiterea de date suplimentare către handler

    Dacă este necesar, puteți transmite date către handler-ul de evenimente (prin specificarea unui argument suplimentar în funcția on). Datele transmise în interiorul handler-ului sunt accesate prin obiectul Event.

    Acest lucru se face astfel (exemplu):

    Afișează conținutul 1 Afișează conținutul 2 ... $("#showContent1").on("clic", (titlu:"Titlu 1", conținut: "Conținut 1..."), function(e)( var output = ""+e.data.title+": " + e.data.content; $("#conținut").html(ieșire); )); $("#showContent2").on("clic", (titlu:"Titlu 2", conținut: "Conținut 2..."), function(e)( var output = ""+e.data.title+" : " + e.data.conținut; $("#conținut").html(ieșire); ));

    Cum să atașați mai multe evenimente la un element

    Un exemplu de utilizare a unui handler pentru mai multe (2 sau mai multe) evenimente:

    $("#id").on("schimbare blur apăsare tastatură", function(e) ( console.log(e.type); // tipul evenimentului )); // sau cam asa ceva var myFunction = function() ( ... ) $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);

    Fiecare eveniment are propria sa funcție:

    $("#id").on(( mouseenter: function() ( // mouseenter event handler... ), mouseleave: function() ( // mouseleave event handler... ), click: function() ( / / click event handler... ) ));

    Un exemplu de utilizare a mai multor handlere (funcții) pentru un eveniment în jQuery:

    $("#demo").click(function())( console.log("1 click event handler"); )); $("#demo").click(function())( console.log("2 click event handler"); ));

    De exemplu, puteți afla în ce ordine vor fi executate evenimentele astfel:

    Var eventList = $._data($("#demo"), "evenimente"); console.log(eventList);

    Apelarea unui eveniment prin program

    Există 2 metode de a apela un eveniment din cod în jQuery:

    • trigger - declanșează evenimentul specificat pe un element.
    • triggerHandler - apelează un handler de evenimente, dar evenimentul în sine nu are loc.
    $("#header").on("click", function() ( console("S-a dat clic pe elementul #header"); ) )); // apel programatic al evenimentului click al elementului $("#header").trigger("click"); // versiunea scurtă a acestui apel $("#header").click(); // apelarea handler-ului de evenimente click pentru elementul selectat $("#header").triggerHandler("click"); jQuery - eveniment de încărcare a paginii (gata)

    Procesul de adăugare a unui handler de evenimente la un element se face de obicei după ce pagina s-a încărcat, de exemplu. când arborele DOM al documentului a fost deja construit. În caz contrar, atunci când scrieți handlere, puteți accesa elemente care nu sunt încă pe pagină.

    Cea mai scurtă intrare pentru un eveniment de încărcare a paginii în jQuery arată astfel:

    $(function())( // acțiuni care urmează să fie efectuate după încărcarea documentului... ));

    Dar puteți folosi și o notație mai lungă:

    $(document).ready(function())( // acțiuni care trebuie efectuate după încărcarea documentului... ));

    jQuery - Încărcare eveniment (încărcare)

    Eveniment încărcați browserul generează pentru un element atunci când acesta și toate elementele sale imbricate au fost încărcate complet. Acest eveniment este destinat doar elementelor care conțin o adresă URL: imagine , script , iframe și fereastră .

    De exemplu, executați o funcție când pagina este complet încărcată (inclusiv imagini):

    $(window).on("încărcare", function() ( // acțiuni după ce pagina este complet încărcată... ));

    De exemplu, să tipărim un mesaj pe consolă când imaginea specificată este încărcată:

    ... $("#imagine").on("încărcare", function() ( console.log("Imagine încărcată"); ));

    jQuery - Evenimente mouse

    Cele mai frecvent utilizate evenimente în jQuery pentru a urmări acțiunile mouse-ului sunt:

    • jos mouse-ul
    • mouse-ul
    • clic
    • mousemove
    • roată
    • planare
    • mouseenter
    • mouse-ul peste
    • mouseleave
    • mouseout
    jQuery - Faceți clic pe eveniment

    Evenimentul click este un eveniment complex, are loc după ce evenimentele mousedown și mouseup au fost declanșate. Evenimentul mousedown are loc atunci când cursorul este peste un element și butonul mouse-ului este apăsat. Evenimentul mouseup are loc atunci când cursorul este peste un element și butonul mouse-ului este eliberat. Evenimentul clic este declanșat când cursorul este peste un element și tasta mouse-ului este apăsată și eliberată. Aceste evenimente pot fi primite de orice element HTML s.

    De exemplu, să atașăm un handler la evenimentul onclick al elementului fereastră. Când are loc acest eveniment, handlerul va afișa numărul tastei apăsate și coordonatele cursorului:

    $(window).on("click", function(e) ( // gestionează evenimentul clic... console.log("Buton apăsat: " + e.which); //1 - butonul din stanga, 2 - butonul din mijloc, 3 - dreapta console.log("Coordonatele cursorului: x = " + e.pageX + " ; y = " + e.pageY); ));

    De exemplu, să atașăm evenimentul onclick la toate elementele cu clasa btn:

    $(".btn").on("click", function())( // cod pentru manipulatorul de evenimente click pe butonul... )); O scurtă descriere a evenimentului clic: $(".btn").click(function())( ... ));

    De exemplu, să vedem cum puteți ascunde un bloc la ceva timp după evenimentul clic:

    ...Ascunde blocul după 5 secunde... ... $(".hide-message").click(function(e)( e.preventDefault(); var _this = this; setTimeout(function())( $( _this).closest(".message").hide(); ), 5000); ));

    jQuery - eveniment Hover
    jQuery - Ce este evenimentul hover

    Evenimentul la care se afișează cursorul este complex și constă din 2 evenimente:

    • apariții (mouseenter, mouseover);
    • plecare (mouseleave, mouseout).

    Evenimentele mouseenter și mouseleave din jQuery diferă de mouseover și mouseout doar prin aceea că nu apar atunci când cursorul intră și respectiv părăsește elementele interne ale elementului ascultat. Cu alte cuvinte, evenimentele mouseover și mouseout apar, dar evenimentele mouseenter și mouseleave nu.

    De exemplu, să schimbăm culoarea unui element din listă când mutați cursorul pe acesta:

    • Pix
    • Creion
    • Rigla
    ... $("ul>li"). mouseenter(function())( // la introducerea unui element $(this).css("culoare","orange"); )). mouseleave(function())( // când părăsești elementul $(this).css("culoare","negru"); ));

    Aceleași acțiuni, dar folosind mouseover și mouseout:

    $("ul>li"). mouseover(function())( // la introducerea unui element $(this).css("culoare","orange"); )). mouseout(function())( // când părăsiți elementul $(this).css("culoare","negru"); ));

    Aceste metode nu trebuie să fie utilizate împreună; ele pot fi utilizate și separat.

    De exemplu, să numărăm numărul de vizite la un element atunci când are loc evenimentul Hover:

    Count: 0 ... $("#count").mouseenter(function())( var count = parseInt($(this).find("span").text()); count++; $(this). găsi ("span").text(count); ));

    În loc să utilizați mouseenter și mouseleave, puteți utiliza evenimentul hover.

    De exemplu, să rescriem exemplul de mai sus folosind hover:

    $("ul>li").hover(function())( // la introducerea elementului $(this).css("culoare","orange"); ), function())( // la iesirea din element $( asta).css("culoare","negru"); ));

    Când utilizați evenimentul hover în jQuery, primul handler este folosit pentru a seta acțiunea când cursorul intră într-un element (mouseenter), iar al doilea handler este folosit când îl părăsiți (mouseleave).

    Dacă specificați un handler pentru evenimentul hover, acesta va fi executat atât pentru a gestiona trecerea mouse-ului, cât și pentru a părăsi mouse-ul.

    De exemplu:

    $("h1").hover(function())( console.log("Au avut loc evenimente de intrare sau ieșire a elementelor"); ));

    jQuery - Eveniment de mutare a mouse-ului

    Evenimentul mousemove este trimis unui element atunci când indicatorul mouse-ului se mișcă în interiorul acestuia. Orice element HTML poate primi acest eveniment.

    $(".target").mousemove(function(e) ( console.log("Handler pentru eveniment mousemove numit."); console.log("Coordonate relativ la colțul din stânga sus al documentului: " + e.pageX + ", " + e.pageY); console.log("Coordonatele cursorului în interiorul țintei: " + e.offsetX + ", " + e.offsetY); ));

    jQuery - eveniment roată mouse-ului

    Ascultarea evenimentului de defilare cu rotița mouse-ului se poate face astfel:

    $(window).on(„roată”, funcția(e) ( // cod de gestionare (de exemplu)... console.log(„Numărul de pixeli derulați: „ + e.originalEvent.deltaY); dacă (de ex. originalEvent. deltaY< 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } });

    Acest eveniment, spre deosebire de scroll, este generat de browser doar pentru roata mouse-ului și nu contează dacă elementul este derulat sau nu, adică. poate fi folosit pe elemente cu preaplin egal cu hidden . O altă diferență este că roata este generată înainte de defilare, iar derularea este generată după aceasta.

    jQuery - Evenimente de la tastatură

    Când o tastă de la tastatură este apăsată, browserul generează evenimente în următoarea ordine:

    Keydown -> apăsare tasta -> keyup

    • keydown (tasta apăsată, dar încă neeliberată);
    • apăsare de taste (eveniment generat pentru litere, numere și alte taste, cu excepția tastelor de control) - destinată obținerii unui cod de caracter (evenimentele de tastare și de tastare vă permit să aflați numai despre codul unei taste, dar nu și despre un caracter) ;
    • keyup (generat de browser când cheia este eliberată).

    De exemplu, să scriem un handler pentru a asculta toate evenimentele care apar atunci când o tastă este apăsată:

    ... $("#țintă").on("keydown apăsare tastată", funcția(e) ( console.log("Tip de eveniment: " + e.type); // keydown, apăsare tasta, tastare console.log( "Codul tastei sau simbolului apăsat: " + e.care); // codul simbol vă permite să obțineți numai apăsarea tastei console.log("Tasta Alt este apăsată: " + e.altKey); console.log( "Tasta Ctrl este apăsată: " + e .ctrlKey); console.log("Tasta Shift apăsată: " + e.shiftKey); console.log("Tasta Cmd apăsată (osMac): " + e.metaKey); ) );

    Un exemplu care arată cum puteți asculta evenimentul apăsării tastelor și puteți afla dacă o combinație de taste specificată este apăsată:

    $(document).keypress("c", function(e) ( if(e.ctrlKey) ( console.log("Combinație de taste Ctrl+c apăsată"); ) ));

    Un exemplu despre cum puteți asculta combinația de taste Ctrl+Enter:

    $(document).keydown(funcție(e) ( // acceptă macOS X dacă ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) ( / / actiunile tale... ) )

    Exemplu de utilizare a evenimentelor keydown și keyup:

    ... $("#nume"). jos tastă(funcție())( $(acest).css(„culoarea fundalului”, „galben”); )). keyup(function())( $(this).css("culoare de fundal, "roz"); ));

    jQuery - Evenimente ale elementelor de formular

    În jQuery, puteți evidenția următoarele evenimente pentru elemente de formular și multe altele:

    • focalizare (concentrare)
    • estompare (focalizare)
    • Schimbare
    • introducere (pentru elemente de formular text)
    • Selectați
    • Trimite
    jQuery - Focusează evenimentele de câștig și pierdere

    Evenimentul de focalizare este trimis unui element atunci când primește focalizarea. Acest eveniment este generat pentru elementele de intrare, selectare și link (a href="..."), precum și pentru orice alte elemente care au setată proprietatea tabindex. Atragerea atenției asupra unui element se face de obicei făcând clic sau apăsând tasta Tab de pe tastatură. Evenimentul de focalizare nu se ridică.

    Pe lângă focus, există un alt eveniment similar, numit focusin. Spre deosebire de focus, acest eveniment bule și poate fi folosit, de exemplu, pentru a detecta un eveniment de focalizare de către elementele părinte.

    Evenimentul de estompare este trimis unui element atunci când își pierde focalizarea. La fel ca focalizarea , evenimentul de estompare are un eveniment de focalizare similar. Acest eveniment diferă de estompare prin faptul că poate bule. Această caracteristică poate fi folosită, de exemplu, pentru a o primi pe elementele părinte, și nu doar pe elementul care a numit-o (țintă).

    De exemplu, la primire element div Pentru evenimentele focus, setați fundalul acestuia la portocaliu:

    ... $("#demo"). focusin(funcție())( $(aceasta).css("culoarea fundalului","portocaliu"); )) .focusout(funcția())( $(aceasta).css("culoarea fundalului","moștenire ") ; ));

    Nu va fi posibil să faceți exact același lucru folosind evenimentele de focalizare și estompare, deoarece nu apar:

    $("#intrare demo"). focus(funcție())( $(aceasta).parent().css("culoare de fundal","orange"); )) .blur(funcție())( $(acest).parent().css( "fond -culoare","moștenire"); ));

    jQuery - Modificare eveniment

    Evenimentul de modificare este conceput pentru a înregistra o modificare a valorii elementelor de intrare, textarea și selectare. Pentru elementele selectate, casetele de selectare și butoanele radio, acest eveniment are loc imediat (adică de îndată ce utilizatorul face o alegere). Însă pentru alte elemente, acest eveniment nu va avea loc până când acel element își va pierde focalizarea.

    Un exemplu de utilizare a evenimentului de modificare pentru a monitoriza starea unui element de casetă de selectare. Disponibilitatea butonului va fi determinată în funcție de starea (bifată sau nu) a casetei de selectare:

    Trimite... $(function() ( $("#de acord").on("schimbare", function())( daca (acesta.verificat) ( $("#trimite").prop("dezactivat", false ); ) else ( $("#trimite").prop("dezactivat",true); ) )); ));

    Un exemplu în care ne vom uita la cum să obținem valoarea unui element selectat atunci când acesta se schimbă:

    Prima valoare A doua valoare A treia valoare ... $(function() ( $("#list").on("change", function())( var value = $(this).val(); $("#) rezultat ").text(valoare); )); ));

    Un exemplu în care ne vom uita la cum să obținem toate elementele selectate ale unei selectări atunci când aceasta se schimbă:

    Verde Roșu Albastru Maro Violet Gri ... $("selectați") .change(function () ( var colors = ; $("select option:selected").each(function() ( colors.push($(this)) .text()); )); console.log("Culori selectate: " + colors.join()); )).change();

    Un exemplu de apelare programatică a evenimentului de modificare pe un element selectat:

    // lista - id-ul elementului de modificare $("#list").trigger("schimbare"); // scurtă $("#listă").change(); // apelează doar handlerul de evenimente de modificare $("#list").triggerHandler("change");

    Un exemplu de utilizare a evenimentului de modificare pentru a obține valoarea unui element de intrare:

    ... $(function() ( // eveniment de modificare a valorii de intrare (apare numai după pierderea focalizării) $("input").on("change", function())( var value = $(this).val( ); console.log(valoare); )); ));

    Dar, pe lângă evenimentul de modificare, există și un eveniment de intrare pentru elementele text. Acest eveniment, spre deosebire de schimbare, este generat imediat și nu după acest element va pierde concentrarea.

    Un exemplu de utilizare a unui eveniment de intrare pentru a obține valoarea unui element de intrare:

    $("input").on("input",function())( var value = $(this).val(); console.log(valoare); ));

    Un exemplu care arată o modalitate de a obține valoarea unui element textarea:

    ... $("textarea").on("input",function())( var value = $(this).val(); console.log(valoare); ));

    Un exemplu în care ne vom uita la cum să folosim evenimentul de modificare pentru a obține valoarea elementului de intrare selectat cu tipul egal cu radio:

    Windows Linux macOS ... $(function() ( $("input").on("schimbare", function())( var value = $(this).val(); console.log(valoare); ) ) ; ));

    jQuery - Selectați evenimentul

    Evenimentul de selectare este generat de browser atunci când utilizatorul din interiorul elementelor de intrare cu type="text" sau textarea selectează text.

    $("#target").select(function() ( console.log("Selectează handler de eveniment numit"); ));

    jQuery – eveniment de trimitere a formularului (trimitere)

    Evenimentul de trimitere are loc pe un element atunci când utilizatorul încearcă să trimită un formular. Acest eveniment poate fi adăugat doar elementelor de formular.

    Exemplu de utilizare a evenimentului de trimitere:

    ... ... $("#feedback").submit(function(e) ( // anulează trimiterea formularului e.preventDefault(); // alte acțiuni, de exemplu, pentru a trimite formularul prin ajax... ));

    Apel programatic pentru trimiterea formularului:

    $("#feedback").submit(); $("#feedback").trigger("trimite");

    jQuery - eveniment de defilare

    jQuery folosește evenimentul de defilare pentru a urmări starea derulării.

    De exemplu, să atașăm o funcție la evenimentul de defilare a paginii care va afișa un element cu clasa de defilare dacă valoarea de defilare este mai mare de 200 px și să o ascundem dacă valoarea de defilare este mai mică decât această valoare.

    // scurtă descriere a funcției $(window).scroll(function() ( // acțiuni la derularea paginii... if ($(this).scrollTop()>200) ( $(".scrollup"). fadeIn() ; ) else ( $(".scrollup").fadeOut(); ) ));

    jQuery - eveniment de redimensionare a ferestrei (redimensionare)

    Pentru a asculta evenimentul de modificare a ferestrei browserului, utilizați resize:

    De exemplu, să creăm un handler care, atunci când fereastra browserului se schimbă, își va afișa lățimea și înălțimea la sfârșitul paginii:

    $(fereastra).resize(function() ( $("corp").append("

    Latime x Inaltime = " + window.innerWidth + " x " + window.innerHeight + "

    "); });

    jQuery - Suprascrierea comportamentului implicit al evenimentului

    Unele elemente din HTML au un comportament standard. De exemplu, atunci când un utilizator face clic pe un link, el merge la adresa specificată în atributul href. Dacă nu aveți nevoie de această acțiune, o puteți anula. Pentru a suprascrie comportamentul implicit, trebuie să apelați metoda preventDefault a obiectului eveniment în handlerul de evenimente.

    De exemplu, să anulăm comportamentul standard al tuturor linkurilor de pe pagină care au clasa de serviciu:

    $("a.service").on("click",function(e)( //anulează acțiunea standard de browser e.preventDefault(); //acțiuni pe care linkul le va efectua... ));

    Ce iese la suprafață și cum să-l oprești

    Pe lângă anularea unei acțiuni standard, în mecanismul evenimentului există și un asemenea lucru precum barbotarea. Constă în faptul că atunci când browserul generează un eveniment, nu o face doar pentru elementul curent (țintă), ci și pentru toți descendenții acestuia, inclusiv părintele:

    Element curent (țintă) -> element părinte al țintei -> element bunic -> ... -> document -> fereastră

    În jQuery, există scenarii când un element din lanțul prezentat are și un handler pentru acest eveniment, care nu trebuie să fie executat. Și pentru a preveni răspândirea acestui eveniment la acest element, trebuie oprit. Pentru a face acest lucru, în handlerul elementului dorit, trebuie să apelați metoda stopPropagation a obiectului eveniment. După apelarea acestei metode, evenimentul se va opri și nu va apărea.

    De exemplu, este necesar ca atunci când mutați cursorul pe un element cu clasa de marcaj, conținutul acestuia să devină portocaliu.

    Un text...fragment...continuare... ... $(".mark").on("hover", function(e)( e.stopPropagation(); $(this).css ("culoare ",orange); ), function(e)( e.stopPropagation(); $(this).css("culoare",negru); ) ));

    În acest caz, dacă nu specificați metoda stopPropagation, atunci când mutați cursorul pe un element span cu clasa mark, acest eveniment va avea loc nu numai pentru acesta, ci și pentru toate elementele sale părinte. Și acest lucru în acest exemplu va duce la faptul că culoarea nu numai a textului inclus în interval se va schimba, ci și a întregului paragraf.

    Dacă trebuie să suprascrieți comportamentul implicit al browserului și să opriți evenimentul de la bule, în jQuery, în loc să apelați aceste două metode, puteți pur și simplu să returnați false ca rezultat al funcției.

    $("a").on("click", function(e)( //e.preventDefault(); //e.stopPropagation(); ... return false; ));

    Adăugarea de evenimente la obiectele create dinamic

    Pentru a atașa un eveniment la un element care nu există încă, puteți utiliza următoarea construcție a funcției on:

    $(document).on(eventName, selector, handler); // document sau orice alt element părinte existent // eventName - numele evenimentului // selector - un selector care filtrează copiii pentru care trebuie lansat handlerul de evenimente // handler - handlerul de evenimente

    Această acțiune poate fi realizată datorită faptului că evenimentul apare și, prin urmare, are loc în toți strămoșii acestui element. Iar obiectul la care se ridică toate evenimentele de pe pagină este documentul. Prin urmare, în majoritatea cazurilor o aleg. După aceasta, cunoscând selectorul, funcția on poate selecta programatic dintre elementele (elementul care a provocat acest eveniment (țintă) și toți strămoșii săi inclusiv părintele) pe cele care îi corespund. Și apoi pentru toate elementele selectate, executați handlerul specificat în funcția on. Acțiunile prin care procesarea evenimentelor este transferată către un alt element (strămoș) se mai numesc proces de delegare a evenimentelor în jQuery.

    De exemplu, să adăugăm un eveniment la un element care nu este încă pe pagină:

    Adăugați un buton // când faceți clic pe un element cu id="addButton" adăugați un buton nou în partea de sus a paginii $("#addButton").on("click", function(e) ( $("body") ").prepend("Șterge-mă"); )); // adaugă un eveniment click care va fi executat pentru elementele care nu sunt încă pe pagina $(document).on("click"".deleteMe", function() ( $(this).remove(); ));

    Delegarea poate fi folosită nu numai pentru a procesa evenimente ale obiectelor create dinamic, ci și pentru a evita atașarea unui handler la fiecare element (dacă pot fi multe pe pagină).

    De exemplu, vom interzice urmărirea legăturilor externe în comentarii (vom redirecționa astfel de acțiuni către pagina de deplasare):

    $(document).on("click","#comment a",function(e) ( if(!(location.hostname === this.hostname || !this.hostname.length)) ( e.preventDefault( ); location.href="away?link="+encodeURIComponent($(this).attr("href")); ) ));

    jQuery - Eliminați handlerul de evenimente

    Managerii de evenimente sunt eliminați folosind metoda off. Mai mult, poate fi folosit pentru a elimina numai acei handlere care au fost adăugate folosind metoda on.

    Apelarea metodei off fără argumente va elimina orice gestionare de evenimente atașată la elementele specificate.

    De exemplu, să dezactivăm toți gestionanții pentru elementele cu clasa link:

    $(".link").off();

    De exemplu, să eliminăm evenimentul clic din toate elementele cu clasa de link:

    $(".link").off("link");

    Un selector special (**) vă permite să ștergeți numai evenimentele delegate, păstrând în același timp pe cele nedelegate:

    $(".link").off("clic","**");

    Eliminați numai evenimentele delegate specificate (folosind un selector):

    // adăugarea unui eveniment delegat $("ul").on("click","li", function())( // scoateți conținutul elementului li în consola console.log($(this).text ()); )); // eliminarea evenimentului delegat $("ul").off("click","li");

    Eliminați toți gestionatorii de evenimente de clic delegați openModal din spațiul de nume modal pentru elementele cu clasa show:

    $("corp").on("click.modal", ".show", openModal);

    Creați un eveniment personalizat

    jQuery folosește metodele on și trigger pentru a crea evenimente personalizate.

    Să vedem cum să creați un eveniment jQuery personalizat folosind următorul exemplu:

    Apelați un eveniment personalizat evidențiat (culoare verde) Apelați un eveniment personalizat evidențiat (culoare roșu) ... // adăugați un eveniment personalizat la toate p elementele care vor schimba culoarea textului și conținutul acestuia // primirea datelor transmise de către metoda de declanșare se face folosind argumentele de culoare și titlul $(".modulul p").on("evidențiați", funcția(e, culoare, titlu) ( $(this).css("culoare",culoare); $( this).text("Evidențierea evenimentului personalizat numit " +titlu); )); // când faceți clic pe un element cu clasa de succes, apelați evenimentul de evidențiere personalizat și treceți-i parametrii $(".success").click(function())( // folosind al doilea argument îi vom transmite datele handlerul de evenimente $(this).closest(". module").find("p").trigger("highlight",["green","(culoarea verde)"]); )); // când faceți clic pe un element cu clasa de eroare, apelați evenimentul de evidențiere personalizat și transmiteți-i parametrii $(".error").click(function())( // folosind al doilea argument îi vom transmite datele handlerul de evenimente $(this).closest(". module").find("p").trigger("highlight",["red","(culoarea roșu)"]); ));