WEBnSTUDY.com
HTML

Parametri događaja u HTML elementima

Moderno programiranje, u grafičkom okruženju, je zasnovano na događajima (event driven), što znači da se program više ne izvršava "od početka do kraja", već je podeljen na celine koje se izvršavaju kada se "nešto desi". To "nešto" bude kada korisnik klikne na dugmence, pozove komandu iz menija, otkuca nešto i sl. Programiranje web aplikacija u velikoj meri preuzima ovaj koncept (iako ne obavezno) pa tako možemo da kreiramo delove programa pisane u JavaScript-u, koji će se izvršavati na osnovu nekih događaja.

HTML elementi su obično ti koji "primaju" događaje, što znači da mora postojati način da povežemo elemenat sa JavaScript programom. Jedan od najjednostavnijih načina je korišćenjem parametara događaja.

Parametri događaja (event attributes) su posebna vrsta HTML parametara. Nisu zaista "univerzalni" da svaki parametar događaja može da se koristi u baš svakom HTML elementu, ali za naše potrebe, možemo ih smatrati takvim.

Sa unapređivanjem tehnologije i potrebama za sve složenijim web aplikacijama, web čitači počinju da podržavaju ogroman broj događaja. Naravno, za svaki postoji odgovarajući parametar, ali mi ćemo se ovde upoznati samo sa nekoliko najpopularnijih. Mnogo detaljniji pregled očekujte da nađete u odeljku koji se bavi web DOM programiranjem.

Parametri događaja se uvode u HTML elemente korišćenjem prefiksa "on". To znači da ako želimo da naša stranica uradi nešto kada korisnik klikne na neki element (događaj click), u oznaku tog elementa ćemo dodati parametar onclick. Vrednost parametra će biti JavaScript program koji se izvršava u toj situaciji.

<div onclick="naredba; naredba;..."> Tekst </div>

Naš savet je da ne preterujete sa JavaScript naredbama, kada zadajete vrednost parametru događaja. I ovako smo "zaprljali" HTML, ne moramo još i da preterujemo. Držite se pravila da kao JavaScript navedete samo poziv funkcije koja onda "odrađuje posao" razrešavanja događaja (event handler).

Parametri događaja

Događaji miša

Ovo su događaji koji se aktiviraju ("opaljuju"), kada korisnik uradi nešto sa mišem. To može biti pritisak dugmeta ili pomeranje miša. Da pogledamo pojedine parametre događaja:

Događaji tastature

Slično kao sa događajima miša, koristimo događaje tastature kako bismo omogućili našoj web stranici da odreaguje kada korisnik koristi tastaturu.

Događaji prozora

Ovi događaji izazivaju reakciju ako se elementu promeni veličina, odnosno skroluje njegov sadržaj.

Događaji vezani za resurse

Ovi događaji se aktiviraju zavisno od stanja određenog resursa. Mogu se npr. vezati za sliku, video ili celu stranicu. Na primer, moguće je odreagovati ako slika ne uspe da se učita (događaj error). Dobra početna tačka za izvršavanje JavaScript programa je load događaj za <body> element. Isto tako, ako je potrebno obaviti određene radnje kada se stranica napušta, elementu <body> je moguće dodeliti i unload događaj.

Primer

Ovo je najprostiji primer pozivanja događaja. Primećujete da JavaScript koji dodeljujemo kao vrednost parametra događaja svodimo na poziv funkcije.


  <script>
    function klik()
    {
      // vezujemo promenljivu obj za element identifikovan kao "blok"
      var obj = document.getElementById("blok");
      
      // onda mu npr. menjamo sadržaj i boju teksta
      obj.innerHTML = "Promenjen tekst.";
      obj.style.color = "#900";
    }
  </script>
  ...
  <div id="blok" onclick="klik()">Tekst unutar bloka.</div>
  

Primećujete da je funkcija klik() ekskluzivno vezana za div element "blok". Pogledajte primer koji se bavi ovakvim načinom obrade događaja.

Korišćenje this

U prethodnom primeru je problem što je funkcija koja razrešava događaj vezana samo za određeni HTML elemenat - nije univerzalna. Šta ako bismo želeli da napravimo funkciju koja će "raditi" za bilo koji element na koji se klikne? Ono što nam treba je način da funkciji nekako prosledimo element na koji je kliknuto, tako da ne moramo da ga povlačimo korišćenjem document.getElementById().

U JavaScriptu se ključna reč this odnosi na objekat iz čijeg konteksta je pozvana funkcija. Obratite pažnju na sledeći primer, koji ilustruje šta u stvari znači kada definišemo događaj.

Primer


  <div id="blok" onclick="klik()">Tekst unutar bloka.</div>

  ... je isto kao da smo u JavaScriptu napisali:

  <script>
    var obj = document.getElementById("blok"); // ne moramo da vezujemo obj za "blok" ali tako je "čistije"
    
    obj.onclick = function()
    {
      // OVDE objekat this referencira objekat na koji je kliknuto ali tu samo pozivamo funkciju klik()
      klik();
    }
    
    function klik()  // funkcija klik() treba da radi nešto korisno kada se klikne na element
    {
      // u funkciji klik() objekat this NEMA VEZE sa objektom na koji je kliknuto!
    }
  </script>

Pošto se pokazalo da this referencira elemenat na kome je izvršen događaj samo direktno unutar JavaScripta koji se navodi u parametru događaja, to jednostavno znači da funkciji koja obrađuje događaj moramo proslediti i objekat this.

Primer


  U navedenim DIV elementima koristimo isti event handler, a ne moramo ni da ih identifikujemo - 
  this prenosi informaciju koja nam je potrebna

  <div onclick="klik(this)">Prvi blok.</div>
  <div onclick="klik(this)">Drugi blok.</div>

  <script>
    // funkcija klik() ima parametar obj u koji se prenosi referenca this iz poziva funkcije
    function klik(obj)
    {
      // šta god radimo sa objektom obj desiće se sa elementom na koji je kliknuto
      obj.innerHTML = "Promenjen tekst.";
      obj.style.color = "#900";
    }
  </script>

  1. Mozilla Developer Network, Event attributes
  2. Mozilla Developer Network, Event reference
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.