Rad sa JavaScriptom i DOM događajima

Recimo da se na jednom mestu nalazi JavaScript program i da je u njemu deklarisana funkcija fun() koja bi trebalo da se aktivira u trenutku kada korisnik klikne mišem na određeni DIV blok. Ta funkcija može raditi bilo šta sa tim blokom ili bilo kojim drugim elementom stranice - ili čak ne raditi ništa što je vidljivo korisniku.

  function fun(){
    // obrada događaja - naredbe koje se izvršavaju kada se događaj desi
  }

Na stranici imamo taj DIV blok koji "dočekuje" klik mišem. Da bi mogao da odreaguje na kliktanje, dodajemo mu poseban parametar onclick. Kao vrednost parametra bismo mogli da smestimo više JavaScript naredbi, ali najpreporučljivije je da samo pozovemo funkciju koja radi sve ostalo. Tako imamo samo jednu naredbu koja predstavlja poziv funkcije fun().

  <div onclick="fun()">
    ...bilo kakav sadržaj div bloka
  </div>

Znači, funkcija obrade događaja, sama po sebi nije nikako specijalno "obeležena". Ona jeste funkcija obrade samo zato što smo napravili da se poziva kada korisnik klikne na DIV blok.

Ako je potrebno da naša funkcija "zna" nad kojim elementom se aktivirao događaj, korišćenjem objekta this, možemo na jednostavan način proslediti referencu na sam elemenat. Funkcija može "primiti" ovaj objekat preko parametra.

  function fun(elemenat) {
    // obrada događaja - parametar "elemenat"
    // predstavlja referencu na objekat na koji je kliknuto
  }

U samom pozivu funkcije, zadajemo objekat this kao parametar i on se u tom slučaju odnosi upravo na elemenat na koji je kliknuto. Funkcija onda "hvata" taj objekat preko parametra "elemenat".

  <div onclick="fun(this)">
    ...sadržaj div bloka
  </div>

Bojenje teksta elementa

Na primer, ako bismo želeli da obojimo tekst onog elementa na koji je korisnik kliknuo mišem, uradili bismo to ovako:

  <script>
    function boja(elemenat) {
      elemenat.style.color = "red";
    }
  </script>

  <div onclick="boja(this)">
    Prvi blok
  </div>

  <div onclick="boja(this)">
    Drugi blok
  </div>

Kao što vidite, postoje dva DIV bloka i za svaki je definisan događaj onclick. U oba se poziva ista funkcija boja(), kojoj se kao argument prosleđuje objekat this. Kada se klikne na prvi DIV blok, this predstavlja referencu na njega, a ako se klikne na drugi blok, onda this referencira taj elemenat.

Funkcija boja() prima referencirani DIV blok u obliku parametra elemenat. Dakle, sve što radimo sa objektom elemenat unutar funkcije, odraziće se na DIV blok na koji je korisnik kliknuo.

Funkcija obrade događaja može biti "klasična" imenovana ili anonimna funkcija. U oba slučaja, da bismo je povezali sa elementom, moramo nekako da "dohvatimo" taj element sa stranice. Poslužla bi nam bilo kakva referenca na element, a ovde koristimo metod getElementById(), objekta document. Kao parametar navodimo identifikaciju HTML elementa. Tako će rezultat ovog metoda biti referenca na taj elemenat, a na to slobodno možemo da "nakačimo" svojstvo onclick.

  document.getElementById("blok").onclick = function() {
    // obrada događaja
  }

  <div id="blok">
    ...sadržaj div bloka
  </div>

U ovom slučaju smo funkciju obrade događaja naveli kao anonimnu funkciju.

Inače se funkcija obrade događaja poziva u kontekstu elementa nad kojim se aktivirao događaj, što znači da unutar funkcije objekat this referencira sam taj elemenat.

Primer bojenja teksta

Pogledajmo primer sa bojenjem teksta elementa na koji je korisnik kliknuo. I u ovom slučaju smo se odlučili za kreiranje nezavisne funkcije boja(). Kao što vidimo, sada ne postoji potreba da funkcija ima parametar. Unutar ove funkcije takođe menjamo boju teksta elementa na koji je kliknuto, ali vidimo da sada to radimo korišćenjem objekta this. Kada se funkcija obrade pozove, unutar nje, objekat this označava elemenat za koji je pozvana.

  <script>
    function boja() {
      this.style.color = "red";
    }
    
    // mora da bude unutar funkcije događaja
    window.onload = function() {
      document.getElementById("prvi").onclick = boja;
      document.getElementById("drugi").onclick = boja;
    }
  </script>

  <div id="prvi">
    Prvi blok
  </div>

  <div id="drugi">
    Drugi blok
  </div>

Povezivanje onclick događaja elementa i funkcije boja() se obavlja tako što "dohvatamo" element metodom getElementById() i njegovo svojstvo onclick referenciramo na funkciju boja(). Ali ovo nije jedina funkcija obrade koju imamo! Pogledajte - i objektu window smo dodali funkciju za događaj onload - znači, nešto će da se desi kada se dokument učita. To što se dešava je definisano u anonimnoj funkciji koju smo referencirali svojstvom onload. Na tom mestu se DIV blokovima definiše onclick događaj.

Zašto povezivanje funkcije obrade mora da bude takođe unutar funkcije i to vezane za onload događaj objekta window? Pa ako je HTML dokument sklopljen na ovakav način, i ako bismo ostavili da referenciranje funkcije boja() za onclick svojstvo "visi" van funkcije, imali bismo grešku, pošto bi povezivanje bilo pokušano čim web čitač naiđe na te naredbe, odnosno, čak i pre nego što se učitaju blokovi "prvi" i "drugi".

Ovako, kada se sve učita, poziva se događaj onload za objekat window i tada se izvršava funkcija u kojoj se vrši povezivanje. Drugo rešenje bi bilo kada bismo <script> odeljak smestili na kraj dokumenta. Pogledajte kako smo to rešili u primeru...

Sve je vrlo slično prethodnom načinu povezivanja funkcija obrade, ali je za nijansu komplikovanije. Opet moramo da "dohvatimo" elemenat iz dokumenta preko njegove identifikacije, jedino što sada ne referenciramo direktno funkciju obrade, već je prosleđujemo metodu addEventListener().

  document.getElementById("blok").addEventListener("click", function() {
    // obrada događaja
  } );

  <div id="blok">
    ...sadržaj div bloka
  </div>

Isto kao i u prethodnom slučaju, funkciju obrade smo dodali kao anonimnu funkciju, a sama funkcija obrade događaja se poziva u kontekstu elementa, što znači da unutar funkcije objekat this referencira taj elemenat.

Primer sa promenom boje izgleda jako slično.

  <script>
    function boja() {
      this.style.color = "red";
    }
    
    window.addEventListener("load", function() {
      document.getElementById("prvi").addEventListener("click", boja);
      document.getElementById("drugi").addEventListener("click", boja);
    });
  </script>

  <div id="prvi">
    Prvi blok
  </div>

  <div id="drugi">
    Drugi blok
  </div>