JavaScript - Event


Razumjevanje događaja i rukovaoca događaja

Događaj se događa kada korisnik komunicira sa web stranicom, na primjer kada je kliknuo na vezu ili dugme, unese tekst u okvir za unos ili tekstualnu zonu, napravi izbor u okvir za odabir, pritisne tipku na tastaturi, pomakne pokazivač miša , predaje obrazac, itd. U nekim slučajevima, pretraživač može pokrenuti događaje, kao što su događaji učitavanja stranice.

Kada se događaj dogodi, možete upotrijebiti JavaScript handler (ili slušatelj događaja) da ih otkrijete i obavite određeni zadatak ili skup zadataka. Po dogovoru, nazivi za obrađivače događaja uvijek počinju riječju "on", a handler događaja za događaj "klik" naziva onclick, slično se obrađivač događaja za događaj učitavanja naziva onload, a obrađivač događaja za događaj "zamagljivanja" naziva se onblur , i tako dalje.

Postoji nekoliko načina da dodijelite obrađivač događaja. Najjednostavniji način je da ih dodate direktno u početnu oznaku HTML elemenata koristeći posebne atribute. Na primjer, da dodijelimo obrađivač klika elementu dugme, možemo koristiti atribut onclick, kao što je prikazano u primjeru:

<button type="button" onclick="alert('Hello World!')">Click Me</button>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Uključivanje rukovatelja događajima u HTML</title>
</head>
<body>
    <button type="button" onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

Međutim, da JavaScript ostane odvojena od HTML-a, možete je postaviti u eksterni JavaScript fajl ili unutar oznaka <script> i </script>, kao što je prikazano u sljedećem primjeru:

<button type="button" id="myBtn">Click Me</button>
<script>
    function sayHello() {
        alert('Hello World!');
    }
    document.getElementById("myBtn").onclick = sayHello;
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Uključivanje rukovatelja događaja u eksterni fajl</title>
</head>
<body>
    <button type="button" id="myBtn">Click Me</button>
    <script>
        function sayHello(){
            alert('Hello World!');
        }
        document.getElementById("myBtn").onclick = sayHello;
    </script>
</body>
</html>

Uopšteno, događaji se mogu svrstati u četiri glavne grupe - događaji miša (mouse events), događaji na tastaturi (keyboard events), događaji forme i događaji dokumenata / prozora (form events and document/window events). Ima još mnogo događaja, o njima ćete saznati u kasnijim lekcijama. Sljedeći dio će vam dati kratak pregled najkorisnijih događaja, jedan po jedan, zajedno sa primjerima u prakse.



Mouse Events

Događaj miša pokreće se kada korisnik klikne neki element, postavi pokazivač miša preko elementa itd. Evo nekoliko najvažnijih događaja miša i njihovih obrađivača događaja.



The Click Event (onclick)

Događaj klika se događa kada korisnik klikne na element na web stranici. Često su to elementi oblika i linkova. Možete upravljati događajem klika pomoću alata za obradu događaja onclick. Sljedeći primjer će vam pokazati poruku upozorenja kada kliknete na elemente.

<button type="button" onclick="alert('Kliknuli ste na dugme!');">Click Me</button>
<a href="#" onclick="alert('Kliknuli ste na link!');">Click Me</a>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem klika</title>
</head>
<body>
    <button type="button" onclick="alert('Kliknuli ste na dugme!');">Click Me</button>
    <a href="#" onclick="alert('Kliknuli ste na link!');">Click Me</a>
</body>
</html>


The Contextmenu Event (oncontextmenu)

Događaj kontekstnog meni događaja, događa se kada korisnik klikne desnim klikom miša na element da otvori kontekstni meni. Možete upravljati događajem kontekstnog menija s oncontextmenu programom za obradu događaja. Sljedeći primjer će pokazati poruku upozorenja kada desnim klikom miša kliknete na elemente.

<button type="button" oncontextmenu="alert('Kliknuli ste desnim tasterom miša na dugme');">Klikni desnim tasterom miša na dugme!</button>
<a href="#" oncontextmenu="alert('Kliknuli ste desnim tasterom miša na link!');">Klikni desnim tasterom miša na link!</a>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem iz kontekstualnog menija</title>
</head>
<body>
    <button type="button" oncontextmenu="alert('Kliknuli ste desnim tasterom miša na dugme!');">Klikni desnim tasterom miša na dugme!</button>
    <a href="#" oncontextmenu="alert('Kliknuli ste desnim tasterom miša na link!');">Klikni desnim tasterom miša na link!</a>
</body>
</html>


The Mouseover Event (onmouseover)

Događaj prelaska mišem (onmouseover), događa se kada korisnik pomiče pokazivač miša preko elementa. Događajem prelaska mišem možete upravljati pomoću alata za obradu događaja onmouseover. Sljedeći primjer će vam pokazati poruku upozorenja kada miš postavite iznad elemenata.

<button type="button" onmouseover="alert('Postavili ste kursor miša preko dugmeta!');">Postavi kursor miša preko dugmeta!</button>
<a href="#" onmouseover="alert('Postavili ste kursor miša preko veze!');">Postavi kursor miša preko linka!</a>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem prelaska mišem</title>
</head>
<body>
    <button type="button" onmouseover="alert('Postavili ste kursor miša preko dugmeta!');">Postavi kursor miš preko dugmeta!</button>
    <a href="#" onmouseover="alert('Postavili ste kursor miša preko veze!');">Postavi kursor miša preko linka!</a>
</body>
</html>


The Mouseout Event (onmouseout)

Događaj miša dogodi se kada korisnik pomiče pokazivač miša izvan elementa. Možete upravljati događajem pokretanjem miša pomoću alata za obradu događaja onmouseout. Sljedeći primjer će vam pokazati upozorenja kada se dogodi događaj miša.

<button type="button" onmouseout="alert('Pomjerili ste kursor miša sa dugmeta!');">Postavite kursor miša na dugme i 
skloni ga!</button>

<a href="#" onmouseout="alert('Pomjerili ste kursor miša sa linka!');">Postavite kursor miša na link i skloni ga!</a>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem miša</title>
</head>
<body>
    <button type="button" onmouseout="alert('Pomjerili ste kursor miša sa dugmeta!');">
    Postavite kursor miša na dugme i skloni ga!</button>

    <a href="#" onmouseout="alert('Pomjerili ste kursor miša sa linka!');">
    Postavite kursor miša na link i skloni ga!</a>
</body>
</html>


Keyboard Events

Događaj na tastaturi se aktivira kada korisnik pritisne ili pusti neku tipku na tastaturi. Evo nekih najvažnijih događaja na tastaturi i njihovih upravljača događaja.



The Keydown Event (onkeydown)

Događaj pritiska na tipku događa se kada korisnik pritisne tipku na tastaturi. Možete upravljati događajem tastature pomoću alata za obradu događaja. Sljedeći primjer će vam prikazati upozorenja kada se dogodi događaj pritiska na taster.

<input type="text" onkeydown="alert('Pritisnuli ste tipku unutar unosa teksta!')">
<textarea onkeydown="alert('Pritisnuli ste tipku unutar textarea!')"></textarea>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem tastature</title>
</head>
<body>
    <input type="text" onkeydown="alert('Pritisnuli ste tipku unutar unosa teksta!')">
    <textarea onkeydown="alert('Pritisnuli ste tipku unutar textarea!')"></textarea>
    <p><strong>Napomena:</strong> Pokušajte unijeti tekst u okvir za unos u tekstualno područje.</p>
</body>
</html>


The Keyup Event (onkeyup)

Događaj tastature događa se kada korisnik otpusti tipku na tastaturi. Možete upravljati događajem tastature pomoću alata za obradu događaja. Sljedeći primjer će vam prikazati poruku upozorenja kada se dogodi događaj tastature.

<input type="text" onkeyup="alert('Pustili ste tipku untar polja za kucanje!')">
<textarea onkeyup="alert('Pustili ste tipku untar polja textarea!')"></textarea>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem tastature</title>
</head>
<body>
    <input type="text" onkeyup="alert('Pustili ste tipku untar polja za kucanje!')">
    <textarea onkeyup="alert('Pustili ste tipku untar polja textarea!')"></textarea>
    <p><strong>Napomena:</strong> Pokušajte unijeti tekst u okvir za unos u tekstualno područje.</p>
</body>
</html>


The Keypress Event (onkeypress)

Događaj pritiska na tipku događa se kada korisnik pritisne tipku na tastaturi s kojom je povezana znakovna vrijednost. Na primjer, ključevi poput: Ctrl, Shift, Alt, Esc, tipke sa strelicama itd. neće generisati događaj pritiska tipke, već će generisati događaj tipke i tipki. Događajem pritiska na taster možete rukovati sa alatom za upravljanje onkeypress događajima. Sljedeći primjer će vam prikazati poruku upozorenja kada se dogodi događaj pritiska na taster.

<input type="text" onkeypress="alert('Pritisnuli ste tipku unutar unosa teksta!')">
<textarea onkeypress="alert('Pritisnuli ste tipku unutar textarea!')"></textarea>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem pritiska tastera</title>
</head>
<body>
    <input type="text" onkeypress="alert('Pritisnuli ste tipku unutar unosa teksta!')">
    <textarea onkeypress="alert('Pritisnuli ste tipku unutar textarea!')"></textarea>
    <p><strong>Napomena:</strong> Pokušajte unijeti tekst u okvir za unos u tekstualno područje.</p>
</body>
</html>


Form Events

Događaj obrasca aktivira se kada kontrola obrasca primi ili izgubi fokus ili kada korisnik promijeni vrijednost kontrole obrasca, poput upisivanja teksta u polje za teksta, odabere bilo koju opciju u okvir za odabir itd. Evo nekoliko najvažnijih događaja oblika i njihovg rukovodilac događaja.



The Focus Event (onfocus)

Događaj fokusa događa se kada se korisnik usredotoči na element web stranice. Događajem fokusiranja možete upravljati pomoću alata za upravljanje fokusom (onfocus). Sljedeći primjer će naglasiti pozadinu unosa teksta žutom bojom kada primi fokus.

<script>
    function highlightInput(elm){
        elm.style.background = "yellow";
    }    
</script>

<input type="text" onfocus="highlightInput(this)">
<button type="button">Dugme</button>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje fokusnim događajem</title>
</head>
<body>
    <script>
        function highlightInput(elm){
            elm.style.background = "yellow";
        }    
    </script>

    <input type="text" onfocus="highlightInput(this)">
    <button type="button">Dugme</button>
</body>
</html>


The Blur Event (onblur)

Do događaja zamagljivanja dolazi kada korisnik odnese fokus iz elementa forme ili prozora. Možete upravljati događajem zamagljivanja pomoću alata onblur. Sljedeći primjer će vam pokazati poruku upozorenja kada element za unos teksta izgubi fokus.

<input type="text" onblur="alert('Tekst je izgubio fokus!')">
<button type="button">Pošalji</button>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem zamagljivanja</title>
</head>
<body>
    <input type="text" onblur="alert('Tekst je izgubio fokus!')">
    <button type="button">Pošalji</button>
    <p><strong>Napomena:</strong> Prvo kliknite unutar okvira za 
    unos teksta, a zatim kliknite vani da biste vidjeli kako to funkcionira.</p>
</body>
</html>

Da biste fokus oduzeli od elementa forme, prvo kliknite unutar njega, a zatim pritisnite taster tab na tastaturi, usmjerite nešto drugo ili kliknite izvan nje.



The Change Event (onchange)

Do događaja promjene dolazi kada korisnik promijeni vrijednost elementa forme. Možete upravljati događajem promjene pomoću alata za obradu događaja na izmjeni (onchange). Sljedeći primjer će vam prikazati poruku upozorenja kada promenite opciju u okviru za odabir.

<select onchange="alert('Promjenili ste stavku!');">
    <option>Odaberi</option>
    <option>Muško</option>
    <option>Žensko</option>
</select>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem promjene</title>
</head>
<body>
    <select onchange="alert('Promjenili ste stavku!');"> 
        <option>Odaberi</option>
        <option>Muško</option>
        <option>Žensko</option>
    </select>
  <p><strong>Napomena:</strong> Odaberite bilo koju opciju u 
        okviru za odabir da biste vidjeli kako to radi.</p>
</body>
</html>


The Submit Event (onsubmit)

Događaj za slanje se samo korisnik kada želite da pošalje obrazac na web stranici. Događajem slanja možete upravljati pomoću alata za obradu događaja koji se šalje (onsubmit). Sljedeći primjer će vam pokazati poruku upozorenja tokom slanja obrasca na poslužitelj (server).

<form action="index.html" method="post" onsubmit="alert('Forma je poslana na server!');">
    <label>Upiši ime:</label>
    <input type="text" name="first-name" required>
    <input type="submit" value="Submit">
</form>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem predaje</title>
</head>
<body>
    <form action="index.html" method="post" onsubmit="alert('Forma je poslana na server!');">
        <label>Upiši ime:</label>
        <input type="text" name="first-name" required>
        <input type="submit" value="Submit">
    </form>
</body>
</html>


Document/Window Events

Događaji se pokreću i u situacijama kada se stranica učitala ili kada korisnik promijeni veličinu prozora pretraživača itd. Evo nekoliko najvažnijih događaja dokumenta / prozora i njihovih obrađivača.



The Load Event (onload)

Do događaja učitavanja dolazi kada se web stranica završi s učitavanjem u web pretraživaču. Možete upravljati događajem opterećenja pomoću alata za upravljanje onloadom. Sljedeći primjer će vam pokazati poruku upozorenja čim stranica završi sa učitavanjem.

<body onload="window.alert('Stranica je uspješno učitana!');">
    <h1>IT TUTORIJALI</h1>
    <p>Ja volim da učim JavaScript.</p>
</body>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem učitavanja</title>
</head>
<body onload="window.alert('Stranica je uspješno učitana!');">
    <h1>IT TUTORIJALI</h1>
    <p>Ja volim da učim JavaScript.</p>
</body>
</html>


The Unload Event (onunload)

Događaj iskrcavanja događa se kada korisnik napusti trenutnu web stranicu. Možete upravljati događajem iskrcavanja pomoću alata za pokretanje događaja (onunload). Sljedeći primjer će vam pokazati poruku upozorenja kada pokušate napustiti stranicu.

<body onunload="alert('Da li sigurno želiš napustiti stranicu?');">
    <h1>IT TUTORIJALI</h1>
    <p>Ja volim da učim JavaScript.</p>
</body>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem istovara</title>
</head>
<body onunload="alert('Da li sigurno želiš napustiti stranicu?');">
    <h1>IT TUTORIJALI</h1>
    <p>Ja volim da učim JavaScript.</p>
</body>
</html>


The Resize Event (onresize)

Događaj promjene veličine događa se kada korisnik promijeni veličinu prozora pretraživača. Događaj veličine se takođe pojavljuje u situacijama kada se prozor pretraživača svede na minimum ili maksimizira. Možete obraditi događaj veličine s alatom za upravljanje onresize događajem. Sljedeći primjer će vam pokazati poruku upozorenja kada promijenite veličinu prozora pretraživača na novu širinu i visinu.

<p id="result"></p>
<script>
    function displayWindowSize() {
        var w = window.outerWidth;
        var h = window.outerHeight;
        var txt = "Window size: width=" + w + ", height=" + h;
        document.getElementById("result").innerHTML = txt;
    }
    window.onresize = displayWindowSize;
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Rukovanje događajem promjene veličine</title>
</head>
<body>
    <p id="result"></p>
    <script>
        function displayWindowSize(){
            var w = window.outerWidth;
            var h = window.outerHeight;
            var txt = "Window size: width=" + w + ", height=" + h;
            document.getElementById("result").innerHTML = txt;
        }
        window.onresize = displayWindowSize;
    </script>
    <p><strong>Napomena:</strong> Promijenite veličinu prozora 
    pretraživača da biste vidjeli kako funkcionira događaj promjene veličine.</p>
</body>
</html>