onClick je događaj broj 1 na ekranu korisnika.
onSlick je klik (ili klik) korisnika na objekt.
Nakon svakog takvog klika korisnika, na ekranu bi se trebala pojaviti akcija odgovora. Ovo osigurava interaktivnost interfejsa i potvrđuje glavni princip komunikacija između računara i osobe - klik, odgovori, klik, odgovori.
U korisničkom žargonu, događaj onSlick se može nazvati kako god želite. Čim obični korisnici ovo ne nazovu jadnim onClick - klik, povuci, klik, klik, bang itd. ... Ali suština ovoga se godinama ne menja - ako je korisnik aktivan na ekranu i klikne na neki objekat, onda kompjuter mora adekvatno da reaguje na njega (korisnika). Ovo je onSlick.
OnClick događaj je od najveće važnosti u svakom jeziku. I HTML nije izuzetak u tome. Poznato je. Zaista, ako se nakon klika (onSlick) na element ništa ne dešava u pretraživaču, zašto se onda mučiti programiranjem bilo čega na stranici? Dakle, onSlick je dobrodošao gost na bilo kom Internet ekranu (ili malom ekranu).
Sada bliže temi. Konkretnije, naš onClick na web stranici u pretraživaču je događaj iz Java skripte, za koji HTML služi samo kao okvir za postavljanje koda njegovih konstrukcija. A, sa stanovišta valjanosti koda baš ovog HTML-a, bilo bi ispravno pisati onclick a ne onSlick (na što su mnogi programeri navikli). Zato što se u HTML-u sve oznake i strukture pišu samo malim slovima.
U HTML-u nema velikih slova. Ne, to je sve! I onim "zlim gadovima" koji pišu u HTML-u velikim slovima, starim dobra vremena Bilo je uobičajeno da se odsijeku ruke sve do koljena. Štaviše. Kažu da bi pod Ocem Carem Ivanom Groznim, zbog pisanja u HTML-u, ovako nešto lako moglo da te spusti, ako ne nabijene na kolac, onda na vješala. Ovo je apsolutno tačno. Naravno, sada su se dvorjani i vladari smirili. Međutim, kada pišete bilo koji kod, morate promatrati barem izgled pristojnosti. Sa ovog mjesta počinje priča o ispravnom onclick-u.
Dakle, odlučeno je i dokazano (za HTML).
Prije svega, pišemo onclick, a ne onSlick!!!
JELOVNIK br. 1
ili
JELOVNIK br. 1
Šta znače ovi ludi redovi shvatićemo malo kasnije, ali za sada...
- U osnovi, događaj onclick iz Java skripte u HTML-u može biti pridružen bilo kojem elementu koda HTML stranice, bilo da je,
Ili . Pretraživač će sve „proždirati“ i sve će raditi. Jedina stvar je da je pristup elementu sa tastature moguć samo za link ili objekat dugmeta. A, ako na trenutak pretpostavimo da korisnik nema miša i radi isključivo sa tastaturom, onda će sve što će moći da dodirne na sajtu biti samo tasteri ili linkovi. Trećeg nema! Stoga je "pričvršćivanje" događaja onclick na objekte koji nisu dostupni sa tastature jednostavno ružno. Pa, ne ljudski, nekako. Ovo dovodi do drugog pravila za onclick u HTML-u - ovaj događaj treba da bude povezan samo sa vezom (oznaka „a“) ili dugmetom (oznaka „button“). Inače će kod i dalje raditi, ali u paklu je za takve programere pripremljen poseban veliki tiganj.
Budući da (u HTML-u) formatiranje i rad sa dugmadima („hlebovima“) izaziva određene poteškoće, jedina, univerzalna i najbolja opcija ostaje samo veza (oznaka “a”). Ali čak i sa ovom oznakom nije sve tako glatko. Sada, vratimo se analizi sa našom linijom koda:
JELOVNIK br. 1
Izbacujemo naslovne linkove iz rasprave kao potpuno očiglednu stvar. Ostaje
JELOVNIK br. 1
Sve daljnje pisanje će se odnositi na temu blokiranja atributa href, koji treba pravilno "paralizirati" kako bi link prestao biti radni link, ali ipak obavlja funkcije onclick .
return false ; - Ovo je direktno blokiranje atributa href. Ako korisnik ima omogućenu Java skriptu u svom pretraživaču, onclick događaj će biti pozvan iz odgovarajuće skripte, umjesto da slijedi vezu. Odnosno, tako da kada kliknete na “link link” nema trenutnog prijelaza na adresu sa href, povratni lažni događaj se dodaje onclick; i pretpostavlja se da će se prvo izvršiti funkcija koja će poništiti vezu ako je javascript omogućen. Dakle, sadržaj atributa href nema nikakvog značenja jer se zanemaruje kada se izvršava java skripta.
Ali evo pitanja. Šta se dešava ako je korisniku onemogućio (onemogućio) Java skript u svom pretraživaču? Kako će se tada ponašati naš link? Neću vas intrigirati, ali ću odmah objaviti moguće opcije razvoj događaja - moguće vrijednosti href atribut i odgovarajuće ponašanje pretraživača nakon klika na takvu vezu kada je Java skripta isključena.
Naravno, ako je javascript isključen u pretraživaču korisnika, to je jedan problem i smetnja. Ako je izvršavanje Java skripti onemogućeno (zabranjeno) u korisnikovom pretraživaču, tada počinju kontinuirani problemi sa href atributom, pošto je oznaka „a“ i dalje veza i pretraživač će pokušati da dođe do nje.
Ne možete potpuno ukloniti atribut href iz veze. Nemoguće je bez atributa href u tekstu linka, a svaki validator će se odmah uvrijediti zbog takvog bijesa prema njenom pikantnom i nježnom tijelu. To znači da tada ostaje samo jedna opcija - da se atribut href popuni probavljivim sadržajem. Ovdje je moguće sljedeće: ostavite href potpuno praznim, popunite ga oštrim znakom "#" ili javascript:// izrazom. Kada je Java skripta isključena (ili greška), nakon klika na takve linkove dogodit će se sljedeće:
Test Atribut href je prazan. Nakon što kliknete na takvu vezu, stranica u pretraživaču će se jednostavno ponovo učitati. Uzorak Atribut href ima vrijednost "#". Nakon što klikne na takvu vezu, korisnik će biti bačen na vrh stranice, bez ponovnog učitavanja. Pokušajte href atribut ima vrijednost "javascript://". Nakon što kliknete na takav link, ništa se neće dogoditi. href="javascript://" - preglednik će jednostavno ignorirati klik na link. Vrijednost "javascript://" za atribut href je standardni "stub" za blokiranje veze kada je Java skripta isključena.
href="javascript://" - sranje!Zašto sranje? Jer internetski život u svijetu pretraživača čini svoja prilagođavanja. Sa ispravne i semantičke tačke gledišta! izgleda, bilo bi apsolutno logično napisati pravi link u atribut href i dodati pravi naslov za ovu vezu. Zatim, nakon klika na takvu vezu, dogodit će se jedna od dvije stvari: ili će se izvršiti onclick događaj iz odgovarajuće Java skripte ili će se dogoditi prijelaz preko prave veze na pravu stranicu (ako je Java skripta onemogućena ili neispravan/neopterećen).
Dakle, da sumiramo. U linku za pozivanje Java script događaja, u href postavljamo pravi link do prave stranice za navigaciju kada je javascript isključen, a u onclick - funkciju koja poziva zahtjev za izvršavanje skripte kada je Java skripta uključena .
Drugim riječima, “href” bi trebao sadržavati potpuno normalan i funkcionalan link na bilo koju web stranicu na koju će korisnik biti preusmjeren kada klikne na “link call call” ugašeno Java skripta, a koje će skripta zanemariti kada uključeno Java skripta. To je sve …
Pa, na kraju -
Provjera pretraživača za uključivanje/isključivanje Java skripteStandardni kod za takvu provjeru izgleda ovako:
Imate onemogućen javascript...
Gdje, jer možete napisati bilo koje stilove u CSS-u, osim display:none; i slični stilovi... Browser je MORA!!! će prikazati ovu poruku na ekranu ako korisnik onemogući Java skriptu u svom pretraživaču. Na ovaj jednostavan način, webmasteri često pišu: “Molimo omogućite javascript” ili prikažite neki prelijepe slike sa sličnim zahtjevom, ili nešto drugo... Unutar oznake noscript Možete postaviti bilo koje HTML oznake. I ovo nije nepotrebna mjera opreza. Unatoč činjenici da sada nije tako lako pronaći web stranicu koja uopće ne koristi javascript.
Ko nije sa nama, protiv nas je
Problem sa isključenim Java skriptom u pretraživaču može se, općenito, radikalno i radikalno riješiti. Na primjer, dodajte HTML5 kod unutar odjeljka, kao:
gdje je http://mysite.ru/ web stranica na koju se odmah preusmjerava
korisnik kada isključeno u pretraživaču Java skripta.
Pogledajmo najstandardnije i najčešće korištene JavaScript događaje:
|
a, oblast, dugme, unos, |
Trenutni element gubi fokus. Javlja se kada |
|
|
Unos, odabir, tekstualno područje |
Promjena vrijednosti elemenata forme. Javlja se nakon što element izgubi fokus, tj. nakon događaja zamućenja |
|
|
Skoro sve |
Jednim klikom (tipka miša pritisnuta i otpuštena) |
|
|
a, oblast, dugme, unos, oznaka, odabir, tekstualno područje |
||
|
Skoro sve |
Taster miša pritisnut unutar trenutnog elementa |
|
|
Praktično |
Kursor miša je izvan granica |
|
|
Skoro sve |
Kursor miša je iznad trenutnog elementa |
|
|
Skoro sve |
Dugme miša je otpušteno unutar trenutnog elementa |
|
|
Pomeranje prozora |
||
|
Promjena veličine prozora |
||
|
Odaberite tekst u trenutnom elementu |
||
|
Slanje podataka obrasca |
||
|
Pokušaj zatvaranja prozora pretraživača i učitavanja dokumenta |
Da bismo dovršili sljedeći primjer, potreban nam je novi koncept - događaj.
U našem slučaju događaj je reakcija programa na radnju korisnika (klik mišem na dugme, smanjenje prozora pretraživača mišem, unos teksta sa tastature itd.). Koristeći program, imamo priliku odgovoriti na bilo koju radnju korisnika.
Razmotrimo jedan od najčešćih događaja - onload - koji se događa kada se dokument učita (kada korisnik svojim radnjama uzrokuje učitavanje web stranice).
Pogledajmo primjer upotrebe javascript događaji onload za promjenu širine i visine elementa.
Primjer: Dodajte sliku na stranicu i, koristeći javascript, kada dođe do događaja učitavanja stranice, učinite da širina slike odgovara širini prozora pretraživača.
✍ Rješenje:
| funkcija resizeImg() ( var myImg= document.getElementById ("img1") ; myImg.style .width = document.body .clientWidth ; ) ... |
funkcija resizeImg())( var myImg=document.getElementById("img1"); myImg.style.width=document.body.clientWidth; ) ...
U primjeru, glavne akcije se dešavaju u funkciji resizeImg():
Zadatak Js8_4. Postavite nekoliko slika (img tag) u html kod. Koristeći promjenu metode:
— veličina (svojstva širine i visine) svih slika stranice
— veličina ivice (svojstvo ivice) svih slika.
Popunite kod:
var allImg=dokument...; // dobijemo niz slika za (var i=0; i< allImg.length; i++){ allImg[i].....; // меняем свойство width ...; // меняем свойство height ...; // меняем border }
JavaScript onclick događaj i tri načina rukovanja događajimaDogađaj onClick nastaje kada se jednom klikne na dugme miša. Obično se događaju dodjeljuje rukovalac, odnosno funkcija koja će se pokrenuti čim se događaj dogodi. Obraditi događaj, tj. Možete reagovati na to koristeći skriptu na tri načina. Pogledajmo ih:
Primjer: Klikom na dugme prikazuje se dijaloški okvir s porukom "Ura!"
Skripta:
U ovom primjeru vidimo dugme u html kodu. Dugme ima onclick atribut ( "na klik"), čija je vrijednost poziv funkcije koja se zove message() . Ovo je prilagođena funkcija opisana gore u skripti. U samoj funkciji se prikazuje dijaloški okvir koji je specificiran prema zadatku.
Skripta za takvu obradu događaja obično se nalazi u području glave dokumenta
Ovo je pojednostavljena verzija rukovanja događajima; pogodna je samo za mali kod kada je potrebno izvršiti jedan ili dva izraza. U suprotnom će kod biti teško čitljiv.
Atribut dugmeta je onclick ( "na klik"), a kao vrijednost skripta je napisana iz operatora koji pokazuju na kojem jeziku je napisana (javascript:). U našem slučaju, operator za prikaz modalnog prozora sa riječju "Ura!"
html kod:
Skripta:
| document.myForm .myButton .onclick = poruka; function message() ( alert("Ura!") ; ) |
document.myForm.myButton.onclick = poruka; function message() ( alert("Ura!"); )
U html kodu se nalazi dugme sa id atributom, koji je neophodan za pristup dugmetu putem skripte.
U skripti, koja se mora nalaziti ispod stabla elemenata (eventualno prije zatvaranja oznake tijela), nalazi se poziv gumba (document.myForm.myButton), za koji se obrađivaču događaja onclick dodjeljuje vrijednost a funkcijska veza. Dugmu se može pristupiti preko id atributa (document.getElementById("myButton").onclick = message;)
Nakon poruke o nazivu funkcije nema zagrada. IN u ovom slučaju ovo je upravo referenca na funkciju, inače, kada se koriste zagrade, funkcija bi bila pozvana, a ne dodijeljena kao rukovalac događaja.
Upravo je ovaj način obrade događaja što je bliži onome što se dešava, na primjer, u Windows OS-u.
Koji je najbolji način za prikaz rezultata primjera?
Važno: Prilikom pozivanja document.write nakon što se stranica završi učitavanjem (prilikom obrade događaja onclick, oninput, ...), stranica će biti prepisana, pa se pozivanje ove metode ne preporučuje. Na primjer, bolje je koristiti metodu alert().
Hajde da razmotrimo sve jednostavne načine izlazne informacije za otklanjanje grešaka:
document.innerHTML += "htmlstr"; // dodaje na stranicu
console.log("str"); // izlazi na konzolu u pretraživačima
Zadatak Js8_5. Dovršite zadatak prema uputama:
| function sayHello() ( var userName= prompt("Kako se zoveš?" ) ; if (korisničko ime) ( alert(...) ; document.getElementById ("smileImg" ) . ...= ...; ) ) |
function sayHello() ( var userName=prompt("Kako se zovete?"); if(userName)( alert(...); document.getElementById("smileImg"). ...=...; ) )
=>>
Događaj se događa kada kursor miša lebdi (onMouseOver) iznad objekta i kada se kursor miša pomakne (onMouseOut) izvan objekta.
Dodjeljivanje rukovaoca događajem se vrši na potpuno isti način kao u slučaju.
Stoga, hajde da završimo zadatak:
Zadatak Js8_6. Kada pređete mišem preko hiperveza, obojite pozadinu stranice u različite boje.
Popunite kod:
Zeleno
...seagreen
... magenta
...ljubičasta
... mornarica
...kraljevsko plavo
Zadatak Js8_7. Kreiranje rollover slike
— Dodajte img oznaku sa slikom kodu.
— Uvesti rukovaoce događajima onmouseover (pri lebdenju) i onmouseout (pri povlačenju). Uradite ovo kao funkcije.
— Priložite rukovaocu događaja onmouseover proceduru za učitavanje druge slike u oznaku img.
- Priložite proceduru onmouseout rukovatelju događaja za učitavanje druge slike u img tag.
U javascriptu možete dodijeliti VIŠE rukovaoca za isti događaj. Za to se koriste sljedeće metode:
addEventListener sintaksa:
Metoda ima tri argumenta:
Element.addEventListener(događaj, rukovalac[, faza]);
function message() ( alert("Ura!"); ) var input = document.getElementById("MyElem"); input.addEventListener("klik", poruka);
Sintaksa za removeEventListener je:
Metodi treba proslijediti iste argumente kao addEventListener:
Element.removeEventListener(događaj, rukovalac[, faza]);
Primjer: U prethodnom zadatku uklonite dodani rukovalac s gumba pomoću metode removeEventListener.
function message() ( alert("Ura!"); ) var input = document.getElementById("MyElem"); input.addEventListener("klik", poruka); input.removeEventListener("klik", poruka);
Događaj uspona i ronjenja
obj.onevent = function(e) (/*...*/) // gdje je e objekt događaja // e.target je element na kojem se događaj dogodio
Pozdrav svima koji žele razumjeti funkcioniranje onclick(). Današnji članak će vam pomoći da jednom za svagda shvatite princip rada ovog obrađivača događaja i analizirate konkretan primjer onclick JavaScript, odnosno primjeri.
Pokazat ću vam nekoliko načina rada s ovim alatom, objasniti njihove prednosti i nedostatke, a također opisati kako jQuery radi sa događajima. Pređimo sada na analizu materijala!
Dodjela rukovatelja događajimaPrvo, pogledajmo teoretski dio pitanja. Gotovo svi obrađuju skripte na svojim stranicama. I obično su to različiti događaji. Da bi se pokrenuli svi ovi programirani događaji, za njih mora biti instaliran rukovalac.
Prema pravilima pisanja, svi rukovaoci uključuju “on+event name” u svoje ime, što se posmatra u onclick(). Ovisno o odabranom događaju, do obrade će doći zbog različite akcije. U našem slučaju, kada koristimo onclick(), izvršavat će se samo oni događaji koji su uzrokovani klikom lijevog miša.
Različiti načini dodjeljivanja rukovatelja događajaDanas postoji nekoliko opcija za uvođenje rukovaoca za određene događaje ili događaje u kod.
Korištenje jednostavnih događajaPočnimo sa jednostavna opcija, koji se sastoji od ugrađivanja onclick() u oznaku samog html dokumenta. izgleda ovako:
Kao što vidite, kada kliknete na dugme levim tasterom miša, pojavljuje se poruka “Klik-klik!”. Skrenuo bih vam pažnju na jedan mali, ali značajan detalj. Možete koristiti samo pojedinačne navodnike ('') unutar upozorenja.
I u ovom slučaju možete koristiti ključna riječ ovo. Odnosi se na trenutni element i pruža sve metode koje su mu dostupne.
Kliknite na mene
Ova linija koda stvara dugme sa tekstom "Klikni na mene". Nakon pritiska, vidjet ćete poruku na ekranu: „Pritisnite!“ Zamijenit će prvo ime tipke.
Ova metoda je nesumnjivo vrlo jednostavna. Međutim, pogodan je samo za slične zadatke, tj. prikazati poruke ili izvršiti jednostavne naredbe.
Ako je potrebno koristiti cikličke strukture, koristiti oznake itd., onda ovu metodu ne odgovara. To će smanjiti čitljivost koda i učiniti ga glomaznim i aljkavim.
U tom slučaju trebate pribjeći funkcijama.
Rad sa funkcijamaFunkcije vam omogućavaju da odvojite traženi kod u poseban blok, koji se kasnije može pozvati putem rukovatelja događaja u .
Kao primjer, priložio sam aplikaciju za prikaz rezultirajućeg broja korisniku raznih stepeni, počevši od 1. pa do 5. Da bih to učinio, kreirao sam funkciju countPow(), kojoj se mogu proslijediti parametri. U mojoj aplikaciji, korisnik mora unijeti broj kao varijablu funkcije.
Dakle, preko rukovaoca povezanog sa gorenavedenom funkcijom, izvršeni su proračuni i prikazani na ekranu.
var rezultat =1; funkcija countPow(n) ( for(var i=1; i