Uvod u događaje u web programiranju

Događaji su akcije ili radnje koje se dešavaju na web stranici i na koje program može da reaguje. Primeri događaja uključuju:

  • Klik miša na dugme ili sliku,
  • Promenu sadržaja u polju za unos,
  • Pomeranje miša preko elementa,
  • Učitavanje stranice,
  • Pritiskanje tastera na tastaturi.
  • ...

Događaji su osnova interaktivnosti u web aplikacijama i koriste se za stvaranje dinamičnog korisničkog interfejsa.

Registrovanje dogadjaja na nekom HTML elementu podrazumeva vezivanje osluškivača dogadjaja (eng. event listener) za HTML elemenat i definisanje posledice tog događaja. Event listener nakon izvršenog dogadjaja poziva na akciju obrađivače događaja (eng. event handler). Event handler je funkcija koja se aktivira kao posledica nekog dogadjaja.

Metode za rukovanje događajima

Metode koje reaguju na događaje nazivamo "event handler" metodama ili funkcijama. Ove metode se pišu u JavaScript jeziku i vezuju se za određene događaje.

Osnovni koraci za kreiranje metoda koje reaguju na događaje:

  1. Identifikacija HTML elementa na koji želimo da reagujemo.

  2. Definisanje metode (funkcije) u JavaScript-u koja će se izvršiti kada se događaj desi.

  3. Povezivanje događaja sa metodom.

Primer 1: Metoda koja reaguje na klik dugmeta

HTML kod: 

<h1>Primer događaja klik</h1>
<button id="dugme">Klikni me</button>

<script>
// Pronalazak elementa
var dugme = document.getElementById("dugme");

// Definisanje metode koja će reagovati na klik
function reagujNaKlik() {
alert("Dugme je kliknuto!");
}

// Povezivanje događaja sa metodom
dugme.addEventListener("click", reagujNaKlik);
</script>

Objašnjenje koda:

  1. HTML dokument sadrži dugme sa id="dugme".

  2. Metoda reagujNaKlik je definisana u JavaScript-u.

  3. Koristi se funkcija addEventListener za povezivanje događaja click sa metodom reagujNaKlik.

  4. Kada korisnik klikne na dugme, prikazuje se iskačući prozor (alert).

Primer 2: Metoda koja reaguje na promenu u tekstualnom polju

HTML kod:

    <h2>Primer događaja promena</h2>
    <input type="text" id="unos" placeholder="Unesite tekst">
    <p id="rezultat"></p>

    <script>
        // Pronalazak elemenata
        var unos = document.getElementById("unos");
        var rezultat = document.getElementById("rezultat");

        // Definisanje metode koja će reagovati na promenu
        function reagujNaPromenu() {
            rezultat.innerText = "Uneli ste: " + unos.value;
        }

        // Povezivanje događaja sa metodom
        unos.addEventListener("input", reagujNaPromenu);
    </script>

Objašnjenje koda:

  1. HTML sadrži polje za unos teksta sa id="unos".

  2. Element sa id="rezultat" koristi se za prikaz unetog teksta.

  3. Metoda reagujNaPromenu se poziva svaki put kada se sadržaj polja promeni.

  4. Koristi se događaj input za praćenje promene vrednosti u polju za unos.

Povezivanje više događaja sa istim elementom

Jedan element može reagovati na više događaja.

Primer: 

var dugme = document.getElementById("dugme");

dugme.addEventListener("mouseover", function() {
    dugme.style.backgroundColor = "lightblue";
});

dugme.addEventListener("mouseout", function() {
    dugme.style.backgroundColor = "";
});

  • Događaj mouseover menja boju pozadine kada se miš pomeri preko dugmeta.

  • Događaj mouseout vraća originalnu boju kada miš napusti dugme.

Zadatak za učenike:

  1. Kreirajte stranicu sa jednim dugmetom koje će prikazati poruku "Dobrodošli!" kada se klikne.

  2. Dodajte polje za unos i paragraf ispod njega. Tekst iz polja treba da se automatski prikazuje u paragrafu.

  3. Kreirajte dugme koje će menjati boju pozadine stranice svaki put kada se klikne.

Korisni Linkovi:

Rad sa događajima:

JavaScript kursevi:

na engleskom jeziku:
na našem jeziku:

Jedna besplatna skripta:

...

Last modified: Monday, 2 February 2026, 3:59 PM