###
  • Programi
  • Sigurnost
  • Vijesti
  • Zanimljiv
  • Savjet
  • Vijesti
  • Recenzije

    • Formirajte događaje. Obrazac događaja Dodatne informacije o događaju

    07.09.2020 Vijesti

    Prethodna tema je razmatrala događaje koji se događaju kada se pritisnu tipke. U ovoj temi ćemo pogledati druge događaje forme. Uključujući slanje obrasca na poslužitelj.

    Element u fokusu

    Kada element obrasca ima fokus, aktivira se događaj fokusa, a kada element izađe iz fokusa, pokreće se događaj zamućenja. Kreirajmo polje za unos i izbacimo tekst na konzolu kada dobije fokus i kada izgubi fokus:

    HTML kôd:

    Nema smisla koristiti ove događaje za promjenu stila elementa. U tu svrhu u CSS-u postoji pseudoklasa koja se zove fokus.

    Unos vrijednosti

    Događaj unosa događa se kada korisnik upiše tekst u polje za unos. Pokreće se kada se svaki znak doda ili ukloni, kao i kada se tekst kopira u polje za unos. U nekim preglednicima radi neobično: svaki put kada se unese znak, pokreće se događaj zamućenja, zatim se izvršava rukovatelj događajem unosa, a zatim se pokreće događaj fokusa. Ako nema rukovatelja događajima fokusa i zamućenja, onda nema problema. Ali ako jesu, aktivirat će se svaki put kada se doda simbol.

    Dodajmo još jednu oznaku na stranicu i prikažimo njenu vrijednost prilikom unosa teksta:

    HTML kôd:

    JavaScript:

    28
    29
    30
    31
    32

    		 var newv = document.getElementById("nova_vrijednost"); newv.onchange = function () ( console.log("Vrijednost promijenjena u: "+newv.value); );
    Slanje obrasca

    Događaj slanja aktivira se kada se obrazac pošalje poslužitelju. Koristi se za provjeru podataka koje je korisnik unio u obrazac. Rukovatelj provjerava vrijednosti elemenata obrasca i ako su neke vrijednosti unesene netočno, obrazac se poništava. Ovo obično prikazuje poruku koja pokazuje što treba ispraviti.

    Postavimo stvorene oznake u obrazac i dodamo gumb za slanje obrasca:

    HTML kôd:

    U prethodnim primjerima, elementi forme su već pronađeni, tako da rukovatelj ne traži ponovno.

    Ako je obrazac ispravno popunjen, odnosno sva polja imaju najmanje dva znaka, tada će preglednik pokušati pokrenuti datoteku navedenu u atributu akcije i pojavit će se pogreška jer takva datoteka ne postoji. Ali u tome nema rizika, pa se ne morate bojati testirati scenarij. Ako u jedno od polja unesete manje od dva znaka, pojavit će se poruka i slanje će biti poništeno. Ako postoji mnogo čekova, možete prikazati drugu poruku za svaki ček i otkazati slanje obrasca.

    Ulazni događaj aktivira se kada je vrijednost elementa , , ili promijenjena.

    Mjehurići Može se otkazati Sučelje Svojstvo rukovatelja događajima
    Da
    Ne
    InputEvent
    GlobalEventHandlers.oinput
    HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("vrijednosti"); input.addEventListener("input", updateValue); funkcija updateValue(e) ( log.textContent = e.target.value; ) Specifikacije rezultata Status specifikacije
    HTML životni standard
    		Životni standard
    Document Object Model (DOM) Specifikacija događaja razine 3
    Definicija "ulaznog događaja" u toj specifikaciji.    		 Zastario
    Kompatibilnost preglednika

    Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.

    Ažurirajte podatke o kompatibilnosti na GitHubu

    Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome za Android Firefox za Android Opera za Android Safari na iOS-u Samsung Internetulazni događaj
    Puna podrška za Chrome DaEdge Puna podrška 79 Potpuna podrška 79 Bez podrške 12 - 79

    Bilješke

    Bilješke Nije podržano na odabranim, potvrdnim okvirima ili radio ulazima.    		Firefox Puna podrška DaIE Djelomična podrška 9

    U ovom ćemo članku pogledati metode koje biblioteka jQuery pruža web programeru za rukovanje događajima.

    Za rad s događajima u skriptama JavaScript preglednik pruža API (na primjer, funkciju addEventListener). Pomoću ove funkcije možete odrediti kod koji će se izvršiti kada preglednik za određeni element generira određeni događaj.

    Rukovanje događajima korištenjem jQuery metoda u sintaksi funkcija

    Prije nego što elementima možete dodati rukovatelje događajima, najprije trebate nabaviti te elemente. Možete naučiti kako pronaći elemente koji su vam potrebni na stranici u jQuery članku - Odabir elemenata.

    U jQueryju možete priložiti događaj (osluškivač događaja) određenom elementu pomoću funkcija on i one, kao i skraćenih unosa.

    // funkcija na .on(events,handler); // funkcija jedan .one(events,handler); // događaji - događaj ili popis događaja odvojenih razmakom, pri čijem je pojavljivanju potrebno izvršiti rukovatelj (handler) // rukovatelj - funkcija (obavljač događaja) // kratak opis funkcije na .događaj(rukovatelj); // događaj - naziv događaja (može se koristiti za obradu samo onih događaja za koje je takav kratki unos kreiran u jQueryju)

    Funkcija one razlikuje se od on samo po tome što izvršava rukovatelj samo jednom kada se dogodi navedeni događaj.

    Na primjer, upotrijebite funkciju on za dodavanje događaja klika za sve elemente s klasom btn:

    // koristi anonimnu funkciju kao rukovatelj $(".btn").on("click", function() ( // akcije koje će se izvršiti kada se događaj dogodi... console.log($(this). tekst( )); )); // koristi regularnu funkciju kao rukovatelj var myFunction = function() ( console.log($(this).text()); ) $(".btn").on("click", myFunction);

    Gornji kod, napisan pomoću skraćenice funkcije on:

    $(".btn").click(function() ( // akcije koje će se izvršiti kada se događaj dogodi... console.log($(this).text()); ));

    dodatne informacije o događaju

    Kada obrađujete događaj, možete saznati neke dodatne informacije o njemu. Prijenos ovih informacija, odnosno objekta događaja, u rukovatelja događajima uvijek se provodi kroz prvi argument.

    $("#demo").on("click", function(e)( // e je objekt događaja koji sadrži dodatne informacije o događaju koji se dogodio // često korištena svojstva objekta događaja e.preventDefault(); / / poništi radnju prema zadanim postavkama e.stopPropagation(); //zaustavi daljnje bubbling događaja // e.type – dobivanje vrste događaja // e.target – poveznica na element na kojem se događaj dogodio // e.currentTarget – veza na trenutni element (za koji je rukovatelj pokrenut). Ovo svojstvo je obično jednako funkciji this. // e.currentTarget === this // e.which – kod tipke (za miša), tipke ili simbola (za tipkovnicu) //e.pageX, e.pageY – koordinate kursora u odnosu na gornji lijevi kut dokumenta));

    Imenski prostor

    U jQueryju, nakon navođenja naziva događaja, možete dodatno navesti prostor naziva.

    Na primjer:

    // događaj klika u prostoru imena prvi $("#demo").on("click.first",function())( console.log("1 rukovatelj događajem klika"); )); // događaj klika u drugom prostoru imena $("#demo").on("click.second",function())( console.log("2 click event handler"); ));

    Imenski prostori su vrlo zgodna stvar. Koristi se, na primjer, kada ne trebate pokrenuti sve događaje, već samo one s određenim nazivom.

    // pokreće događaj klika u prvom prostoru imena $("#demo").trigger("click.first"); // pokreće događaj klika u drugom prostoru imena $("#demo").trigger("click.second");

    Također olakšava brisanje određenih događaja:

    //ukloni rukovatelje događajima klika u prvom prostoru imena $("#demo").off("click.first"); //ukloni rukovatelje događajima klika u drugom prostoru imena $("#demo").off("click.second");

    Opisi i primjeri korištenja funkcija okidača i isključivanja raspravljaju se u članku malo niže.

    Prosljeđivanje dodatnih podataka rukovatelju

    Ako je potrebno, možete proslijediti podatke rukovatelju događajima (navođenjem dodatnog argumenta u funkciji on). Pronesenim podacima unutar rukovatelja pristupa se preko objekta Event.

    To se radi ovako (primjer):

    Prikaži sadržaj 1 Prikaži sadržaj 2 ... $("#showContent1").on("click", (title:"Title 1", content: "Content 1..."), function(e)( var output = ""+e.data.title+": " + e.data.content; $("#content").html(izlaz); )); $("#showContent2").on("klik", (naslov:"Naslov 2", sadržaj: "Sadržaj 2..."), function(e)( var output = ""+e.data.title+" : " + e.data.content; $("#content").html(izlaz); ));

    Kako priložiti više događaja jednom elementu

    Primjer korištenja jednog rukovatelja za nekoliko (2 ili više) događaja:

    $("#id").on("keyup keypress blur change", function(e) ( console.log(e.type); // event type )); // ili tako var myFunction = function() ( ... ) $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);

    Svaki događaj ima svoju funkciju:

    $("#id").on(( mouseenter: function() ( // mouseenter rukovatelj događajima...), mouseleave: function() ( // mouseleave rukovatelj događajima...), click: function() ( / / rukovatelj događajem klika... ) ));

    Primjer korištenja nekoliko rukovatelja (funkcija) za jedan događaj u jQueryju:

    $("#demo").click(function())( console.log("1 klik rukovatelj događajem"); )); $("#demo").click(function())( console.log("2 click handler event"); ));

    Na primjer, možete saznati kojim će se redoslijedom događaji izvršavati ovako:

    Var eventList = $._data($("#demo"), "događaji"); console.log(eventList);

    Programsko pozivanje događaja

    Postoje 2 metode za pozivanje događaja iz koda u jQueryju:

    • okidač - pokreće navedeni događaj na elementu.
    • triggerHandler - poziva rukovatelja događajem, ali se sam događaj ne događa.
    $("#header").on("click", function() ( console("Kliknuto je na element #header"); ) )); // programski poziv događaja klika elementa $("#header").trigger("click"); // kratka verzija ovog poziva $("#header").click(); // pozivanje rukovatelja događajem klika za odabrani element $("#header").triggerHandler("click"); jQuery - događaj učitavanja stranice (spremno)

    Proces dodavanja rukovatelja događajem elementu obično se provodi nakon što se stranica učita, tj. kada je DOM stablo dokumenta već izgrađeno. Inače, kada pišete rukovatelje, možete pristupiti elementima koji još nisu na stranici.

    Najkraći unos za događaj učitavanja stranice u jQueryju izgleda ovako:

    $(function())( // radnje koje treba izvesti nakon učitavanja dokumenta... ));

    Ali možete koristiti i duži zapis:

    $(document).ready(function())( // akcije koje je potrebno izvršiti nakon učitavanja dokumenta... ));

    jQuery - događaj učitavanja (učitavanje)

    Događaj učitati preglednik generira za element kada su on i svi njegovi ugniježđeni elementi u potpunosti učitani. Ovaj događaj namijenjen je samo elementima koji sadrže URL: slika, skripta, iframe i prozor.

    Na primjer, izvršite funkciju kada je stranica potpuno učitana (uključujući slike):

    $(window).on("load", function() ( // akcije nakon što se stranica u potpunosti učita... ));

    Na primjer, ispišite poruku na konzolu kada se učita navedena slika:

    ... $("#image").on("load", function() ( console.log("Slika je učitana"); ));

    jQuery - događaji miša

    Najčešće korišteni događaji u jQueryju za praćenje radnji miša su:

    • mousedown
    • miš gore
    • klik
    • pomicanje miša
    • kotač
    • lebdjeti
    • mouseenter
    • prelazak mišem
    • mouseleave
    • mouseout
    jQuery - događaj klika

    Događaj klika složen je događaj, događa se nakon pokretanja događaja mousedown i mouseup. Događaj mousedown događa se kada je pokazivač iznad elementa i pritisnuta je tipka miša. Događaj mouseup događa se kada je pokazivač iznad elementa i kada se tipka miša otpusti. Događaj klika pokreće se kada je kursor iznad elementa, a tipka miša je pritisnuta i otpuštena. Ove događaje može primiti bilo tko HTML element s.

    Na primjer, pridružimo rukovatelj događaju onclick elementa prozora. Kada se dogodi ovaj događaj, rukovatelj će prikazati broj pritisnute tipke i koordinate kursora:

    $(window).on("click", function(e) ( // rukovanje događajem klika... console.log("Button pressed: " + e.which); //1 - lijevi gumb, 2 - srednji gumb, 3 - desna konzola.log("Koordinate kursora: x = " + e.pageX + " ; y = " + e.pageY); ));

    Na primjer, pridružimo događaj onclick svim elementima s klasom btn:

    $(".btn").on("click", function())( // kod za rukovatelja događajem klika na gumb... )); Kratak opis događaja klika: $(".btn").click(function())( ... ));

    Na primjer, pogledajmo kako možete sakriti blok neko vrijeme nakon klika:

    ...Sakrij blok nakon 5 sekundi... ... $(".hide-message").click(function(e)( e.preventDefault(); var _this = this; setTimeout(function())( $( _this).closest(".message").hide(); ), 5000); ));

    jQuery - događaj lebdenja
    jQuery - Što je događaj lebdenja

    Događaj kada se pokazivač pojavi složen je i sastoji se od 2 događaja:

    • pojavljivanja (unos miša, prelazak mišem);
    • odlazak (mouseleave, mouseout).

    Događaji mouseenter i mouseleave u jQueryju razlikuju se od mouseover-a i mouseout-a samo po tome što se ne događaju kada pokazivač ulazi i napušta unutarnje elemente elementa koji se sluša. Drugim riječima, događaji mouseover i mouseout se pojavljuju, ali događaji mouseenter i mouseleave ne.

    Na primjer, promijenimo boju stavke popisa kada na nju pomaknete kursor:

    • Olovka
    • Olovka
    • Vladar
    ... $("ul>li"). mouseenter(function())( // kada unosite element $(this).css("color","orange"); )). mouseleave(function())( // kada napuštate element $(this).css("color","black"); ));

    Iste radnje, ali korištenjem mouseover i mouseout:

    $("ul>li"). mouseover(function())( // kada unosite element $(this).css("color","orange"); )). mouseout(function())( // kada napuštate element $(this).css("color","black"); ));

    Ove metode ne moraju se koristiti zajedno; mogu se koristiti i zasebno.

    Na primjer, izbrojimo broj posjeta elementu kada se dogodi događaj lebdenja:

    Broj: 0 ... $("#count").mouseenter(function())( var count = parseInt($(this).find("span").text()); count++; $(this). pronađi ("span").tekst(broj); ));

    Umjesto korištenja mouseenter i mouseleave, možete koristiti događaj lebdenja.

    Na primjer, prepišimo gornji primjer pomoću lebdenja:

    $("ul>li").hover(function())( // kada ulazite u element $(this).css("color","orange"); ), function())( // kada napuštate element $(ovo).css("boja","crna"); ));

    Kada koristite događaj lebdenja u jQueryju, prvi rukovatelj se koristi za postavljanje radnje kada kursor uđe u element (mouseenter), a drugi rukovatelj se koristi kada ga napušta (mouseleave).

    Ako navedete jedan rukovatelj za događaj lebdenja, on će se izvršiti i za rukovanje lebdenjem miša i napuštanjem miša.

    Na primjer:

    $("h1").hover(function())( console.log("Dogodili su se događaji ulaska ili izlaska elementa"); ));

    jQuery - događaj pomicanja miša

    Događaj mousemove šalje se elementu kada se pokazivač miša pomiče unutar njega. Svaki HTML element može primiti ovaj događaj.

    $(".target").mousemove(function(e) ( console.log("Pozvan rukovatelj za događaj mousemove."); console.log("Koordinate u odnosu na gornji lijevi kut dokumenta: " + e.pageX + ", " + e.pageY); console.log("Koordinate kursora unutar cilja: " + e.offsetX + ", " + e.offsetY); ));

    jQuery - događaj kotačića miša

    Slušanje događaja pomicanja kotačića miša može se učiniti ovako:

    $(window).on("wheel", function(e) ( // kod rukovatelja (na primjer)... console.log("Broj pomaknutih piksela: " + e.originalEvent.deltaY); if (npr. originalni događaj deltaY< 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } });

    Ovaj događaj, za razliku od pomicanja, preglednik generira samo za kotačić miša i nije bitno je li element pomican ili ne, tj. može se koristiti na elementima s preljevom jednakim skrivenom. Druga je razlika u tome što se kotačić generira prije pomicanja, a pomicanje nakon njega.

    jQuery - Događaji na tipkovnici

    Kada se pritisne tipka na tipkovnici, preglednik generira događaje sljedećim redoslijedom:

    Tipka dolje -> pritisak tipke -> tipka gore

    • keydown (tipka pritisnuta, ali još nije otpuštena);
    • pritisak tipke (događaj se generira za slova, brojke i druge tipke, osim kontrolnih) – namijenjen dobivanju šifre znaka (događaji tipke down i keyup omogućuju vam da saznate samo šifru tipke, ali nije lik);
    • keyup (generira preglednik kada se tipka otpusti).

    Na primjer, napišimo rukovatelj za slušanje svih događaja koji se dogode kada se pritisne tipka:

    ... $("#target").on("keydown keypress keyup", function(e) ( console.log("Event type: " + e.type); // keydown, keypress, keyup console.log( "Kôd pritisnute tipke ili simbola: " + e.which); // kod simbola omogućuje vam da dobijete samo pritisak tipke console.log("Tipka Alt je pritisnuta: " + e.altKey); console.log( "Tipka Ctrl je pritisnuta: " + e .ctrlKey); console.log("Tipka Shift pritisnuta: " + e.shiftKey); console.log("Tipka Cmd pritisnuta (osMac): " + e.metaKey); ) );

    Primjer koji pokazuje kako možete slušati događaj pritiska tipke i saznati je li pritisnuta određena kombinacija tipki:

    $(document).keypress("c", function(e) ( if(e.ctrlKey) ( console.log("Ctrl+c kombinacija tipki pritisnuta"); ) ));

    Primjer kako možete slušati kombinaciju tipki Ctrl+Enter:

    $(document).keydown(function(e) ( // podržava macOS X if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) ( / / tvoji postupci... ))

    Primjer korištenja događaja tipke down i keyup:

    ... $("#ime"). keydown(function())( $(this).css("background-color", "yellow"); )). keyup(funkcija())( $(ovo).css("boja-pozadine, "ružičasta"); ));

    jQuery - Događaji elemenata obrasca

    U jQueryju možete istaknuti sljedeće događaje za elemente obrasca i više:

    • fokus (fokus)
    • zamućenje (izoštravanje)
    • promijeniti
    • unos (za tekstualne elemente obrasca)
    • Izaberi
    • podnijeti
    jQuery - Fokusirajte događaje dobitka i gubitka

    Događaj fokusa šalje se elementu kada primi fokus. Ovaj se događaj generira za elemente input, select i link (a href="..."), kao i za sve druge elemente koji imaju postavljeno svojstvo tabindex. Fokusiranje na element obično se vrši klikom ili pritiskom tipke Tab na tipkovnici. Događaj fokusa se ne pojavljuje.

    Osim fokusa, postoji još jedan sličan događaj, zove se fokusin. Za razliku od fokusa, ovaj događaj mjehurića i može se, na primjer, koristiti za otkrivanje događaja fokusa od strane nadređenih elemenata.

    Događaj zamućenja šalje se elementu kada izgubi fokus. Kao i fokus, događaj zamućenja ima sličan događaj fokusa. Ovaj se događaj razlikuje od zamućenja po tome što može stvarati mjehuriće. Ova značajka se može koristiti, na primjer, za primanje na nadređenim elementima, a ne samo na elementu koji ju je pozvao (cilj).

    Na primjer, prilikom primanja div element Za fokusne događaje, postavite njegovu pozadinu na narančastu:

    ... $("#demo"). focusin(function())( $(this).css("background-color","orange"); )) .focusout(function())( $(this).css("background-color","inherit ") ; ));

    Neće biti moguće učiniti potpuno istu stvar koristeći događaje fokusa i zamućenja, jer ne iskaču:

    $("#demo unos"). focus(function())( $(this).parent().css("background-color","orange"); )) .blur(function())( $(this).parent().css( "boja pozadine", "naslijediti"); ));

    jQuery - Promjena događaja

    Događaj promjene osmišljen je da registrira promjenu vrijednosti elemenata input, textarea i select. Za elemente odabira, potvrdne okvire i radio gumbe, ovaj se događaj događa odmah (to jest, čim korisnik napravi izbor). Ali za druge elemente, ovaj događaj se neće dogoditi dok taj element ne izgubi fokus.

    Primjer korištenja događaja promjene za praćenje stanja elementa okvira za potvrdu. Dostupnost gumba odredit će se ovisno o stanju (označeno ili ne) potvrdnog okvira:

    Pošalji... $(function() ( $("#agree").on("change", function())( if (this.checked) ( $("#send").prop("disabled", false ); ) else ( $("#send").prop("disabled",true); ) )); ));

    Primjer u kojem ćemo pogledati kako dobiti vrijednost odabranog elementa kada se promijeni:

    Prva vrijednost Druga vrijednost Treća vrijednost ... $(function() ( $("#list").on("change", function())( var value = $(this).val(); $("# rezultat ").tekst(vrijednost); )); ));

    Primjer u kojem ćemo pogledati kako dobiti sve odabrane elemente odabira kada se promijeni:

    Zelena Crvena Plava Smeđa Ljubičasta Siva ... $("select") .change(function () ( var colors = ; $("select option:selected").each(function() ( colors.push($(this) .text()); )); console.log("Odabrane boje: " + colors.join()); )).change();

    Primjer programskog pozivanja događaja promjene na odabranom elementu:

    // lista - id elementa promjene $("#list").trigger("promjena"); // skraćenica $("#list").change(); // pozivamo samo rukovatelja događaja promjene $("#list").triggerHandler("change");

    Primjer korištenja događaja promjene za dobivanje vrijednosti ulaznog elementa:

    ... $(function() ( // događaj promjene ulazne vrijednosti (događa se samo nakon gubitka fokusa) $("input").on("change", function())( var value = $(this).val( ) ; console.log(vrijednost); )); ));

    Ali osim događaja promjene, postoji i događaj unosa za elemente teksta. Ovaj se događaj, za razliku od promjene, generira odmah, a ne nakon ovaj element izgubit će fokus.

    Primjer korištenja događaja unosa za dobivanje vrijednosti elementa unosa:

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

    Primjer koji pokazuje jedan način dobivanja vrijednosti elementa textarea:

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

    Primjer u kojem ćemo pogledati kako koristiti događaj promjene za dobivanje vrijednosti odabranog ulaznog elementa s tipom jednakim radiju:

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

    jQuery - Odaberite događaj

    Događaj odabira generira preglednik kada korisnik unutar elemenata unosa s type="text" ili textarea odabere tekst.

    $("#target").select(function() ( console.log("Pozvan rukovatelj odabirom događaja"); ));

    jQuery – Događaj slanja obrasca (submit)

    Događaj slanja događa se na elementu kada korisnik pokuša poslati obrazac. Ovaj se događaj može dodati samo elementima obrasca.

    Primjer korištenja događaja slanja:

    ... ... $("#feedback").submit(function(e) ( // poništi slanje obrasca e.preventDefault(); // druge radnje, na primjer, slanje obrasca putem ajaxa... ));

    Programski poziv za slanje obrasca:

    $("#povratna informacija").submit(); $("#feedback").trigger("submit");

    jQuery - Scroll događaj

    jQuery koristi događaj pomicanja za praćenje stanja pomicanja.

    Na primjer, priložimo funkciju događaju pomicanja stranice koja će prikazati element s klasom pomicanja ako je vrijednost pomicanja veća od 200px i sakriti ga ako je vrijednost pomicanja manja od te vrijednosti.

    // kratki opis funkcije $(window).scroll(function() ( // radnje pri skrolanju stranice... if ($(this).scrollTop()>200) ( $(".scrollup"). fadeIn() ; ) else ( $(".scrollup").fadeOut(); ) ));

    jQuery - događaj promjene veličine prozora (promjena veličine)

    Za slušanje događaja promjene prozora preglednika upotrijebite promjenu veličine:

    Na primjer, stvorimo rukovatelj koji će, kada se prozor preglednika promijeni, prikazati njegovu širinu i visinu na kraju stranice:

    $(window).resize(function() ( $("body").append("

    Širina x Visina = " + window.innerWidth + " x " + window.innerHeight + "

    "); });

    jQuery - Nadjačavanje zadanog ponašanja događaja

    Neki elementi u HTML-u imaju standardno ponašanje. Na primjer, kada korisnik klikne na poveznicu, odlazi na adresu navedenu u atributu href. Ako vam ova radnja nije potrebna, možete je otkazati. Da biste nadjačali zadano ponašanje, morate pozvati metodu preventDefault objekta događaja u rukovatelju događajima.

    Na primjer, poništimo standardno ponašanje svih veza na stranici koje imaju klasu usluge:

    $("a.service").on("click",function(e)( //otkaži standardnu ​​radnju preglednika e.preventDefault(); //akcije koje će veza izvesti... ));

    Što izlazi na površinu i kako to zaustaviti

    Osim otkazivanja standardne radnje, u mehanizmu događaja postoji i nešto poput bubblinga. Ono leži u činjenici da kada preglednik generira događaj, on to ne čini samo za trenutni element (cilj), već i za sve njegove potomke, uključujući roditelja:

    Trenutni element (cilj) -> nadređeni element cilja -> nadređeni element -> ... -> dokument -> prozor

    U jQueryju postoje scenariji kada neki element u prikazanom lancu također ima rukovatelj za ovaj događaj, koji se ne mora izvršiti. A kako bi se spriječilo da se ovaj događaj proširi na ovaj element, mora se zaustaviti. Da biste to učinili, u rukovatelju željenog elementa morate pozvati metodu stopPropagation objekta događaja. Nakon pozivanja ove metode, događaj će se zaustaviti i neće se pojavljivati.

    Na primjer, potrebno je da kada kursor pomaknete na element s oznakom class, njegov sadržaj postane narančast.

    Neki tekst...fragment...nastavak... ... $(".mark").on("hover", function(e)( e.stopPropagation(); $(this).css ("color ",narančasto); ), funkcija(e)( e.stopPropagation(); $(ovo).css("boja",crna); ) ));

    U ovom slučaju, ako ne navedete metodu stopPropagation, tada kada pomaknete kursor na element raspona s klasom oznake, ovaj događaj će se dogoditi ne samo za njega, već i za sve njegove nadređene elemente. A to će u ovom primjeru dovesti do činjenice da će se promijeniti boja ne samo teksta unutar raspona, već i cijelog odlomka.

    Ako trebate nadjačati zadano ponašanje preglednika i zaustaviti pojavljivanje događaja, u jQueryju, umjesto pozivanja ove dvije metode, možete jednostavno vratiti false kao rezultat funkcije.

    $("a").on("klik", funkcija(e)( //e.preventDefault(); //e.stopPropagation(); ... return false; ));

    Dodavanje događaja u dinamički stvorene objekte

    Kako biste priložili događaj elementu koji još ne postoji, možete upotrijebiti sljedeću konstrukciju funkcije on:

    $(dokument).na(nazivdogađaja, selektor, rukovatelj); // dokument ili bilo koji drugi postojeći nadređeni element // eventName - naziv događaja // selektor - selektor koji filtrira djecu za koje treba pokrenuti rukovatelj događajima // rukovatelj - rukovatelj događajima

    Ova radnja se može izvršiti zbog činjenice da se događaj pojavljuje i stoga se javlja u svim precima ovog elementa. A objekt na koji se svi događaji na stranici prelijevaju je dokument. Stoga ga u većini slučajeva odabiru. Nakon toga, znajući selektor, funkcija on može programski odabrati među elementima (element koji je uzrokovao ovaj događaj (cilj) i svi njegovi preci uključujući roditelja) one koji mu odgovaraju. Zatim za sve odabrane elemente izvršite rukovatelj naveden u funkciji on. Akcije kroz koje se obrada događaja prenosi na drugi element (pretka) također se nazivaju proces delegiranja događaja u jQueryju.

    Na primjer, dodajmo događaj elementu koji još nije na stranici:

    Dodajte gumb // kada kliknete na element s id="addButton" dodajte novi gumb na vrh stranice $("#addButton").on("click", function(e) ( $("body ").prepend("Izbriši me"); )); // dodaj događaj klika koji će se izvršiti za elemente koji još nisu na stranici $(dokument).on("click"".deleteMe", function() ( $(this).remove(); ));

    Delegiranje se može koristiti ne samo za obradu događaja dinamički stvorenih objekata, već i za izbjegavanje pripajanja rukovatelja svakom elementu (ako ih može biti puno na stranici).

    Na primjer, zabranit ćemo praćenje vanjskih poveznica u komentarima (preusmjerit ćemo takve radnje na stranicu za odsustvo):

    $(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 - Ukloni rukovatelja događajima

    Rukovatelji događajima uklanjaju se metodom isključivanja. Štoviše, može se koristiti za uklanjanje samo onih rukovatelja koji su dodani metodom on.

    Pozivanje metode off bez argumenata uklonit će sve rukovatelje događajima pridružene navedenim elementima.

    Na primjer, onemogućimo sve rukovatelje za elemente s klasom veze:

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

    Na primjer, uklonimo događaj klika iz svih elemenata s klasom veze:

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

    Poseban selektor (**) omogućuje brisanje samo delegiranih događaja uz zadržavanje onih koji nisu delegirani:

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

    Uklonite samo navedene delegirane događaje (pomoću selektora):

    // dodavanje delegiranog događaja $("ul").on("click","li", function())( // izbaci sadržaj li elementa na konzolu console.log($(this).text ()); )) ; // uklanjanje delegiranog događaja $("ul").off("click","li");

    Uklonite sve openModal delegirane rukovatelje događajima klika u modalnom prostoru imena za elemente s klasom show:

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

    Stvorite prilagođeni događaj

    jQuery koristi on i trigger metode za stvaranje prilagođenih događaja.

    Pogledajmo kako stvoriti prilagođeni jQuery događaj koristeći sljedeći primjer:

    Pozovite isticanje prilagođenog događaja (zelena boja) Pozovite isticanje prilagođenog događaja (crvena boja) ... // dodajte prilagođeni događaj svim p elementima koji će promijeniti boju teksta i njegov sadržaj // primanje podataka koje prosljeđuje metoda okidača izvodi se pomoću argumenata boje i naslova $(".module p").on("highlight", function(e, color, title) ( $(this).css("color",color); $( this).text("Nazvano isticanje prilagođenog događaja " +title); )); // kada kliknete na element s klasom uspjeha, pozovite prilagođeni događaj isticanja i proslijedite mu parametre $(".success").click(function())( // pomoću drugog argumenta proslijedit ćemo podatke rukovatelj događajem $(this).closest(". modul").find("p").trigger("highlight",["green","(color green)"]); )); // kada kliknete na element s klasom pogreške, pozovite prilagođeni događaj isticanja i proslijedite mu parametre $(".error").click(function())( // pomoću drugog argumenta proslijedit ćemo podatke rukovatelj događajem $(this).closest(". modul").find("p").trigger("highlight",["red","(color red)"]); ));