jQuery - Events


Šta su događaji (Events)

Događaji su često pokrenuti korisnikovom interakcijom s web stranicom, na primjer kada se klikne na vezu ili dugme, tekst unese u okvir za unos ili tekstualni prostor, odabere element u polju za odabir, pritisne tipka na tastaturi, pomiče pokazivač miša itd. U nekim slučajevima pretraživač sam može pokrenuti događaje, poput događaja učitavanja i zatvaranja stranice.

jQuery poboljšava osnovne mehanizme upravljanja događajima nudeći metode događaja za većinu događaja izvornog pretraživača, neke od ovih metoda su; ready(), click(), keypress(), focus(), blur(), change() itd. Na primjer, za izvršavanje nekog JavaScript koda kada je DOM spreman, možete koristiti metodu jQuery ready(), poput ove:

<script>
$(document).ready(function(){
    // Kod koji se treba izvršiti
    alert("Hello World!");
});
</script
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije kada je dokument spreman u jQuery-ju</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Kod koji se treba izvršiti
    alert("Hello World!");
});
</script> 
</head>
<body>
    <!--Sadržaj će biti umetnut ovdje-->
</body>
</html>

Uopšteno, događaji se mogu kategorizovati u četiri glavne grupe - događaji miša, događaji tipkovnice, događaji obrazaca i događaji dokumenata/prozora (eng. mouse events, keyboard events, form events and document/window events). Sljedeći dio daće vam kratak pregled svih ovih događaja.



Mouse Events

Događaj miša aktivira se kada korisnik klikne neki element, pomakne pokazivač miša itd. Evo nekoliko uobičajenih metoda jQuery za rukovanje događajima miša.



click() metoda

jQuery metoda click() dodaje funkciju obrađivača događaja odabranim elementima za događaj "click". Funkcija se izvršava kada korisnik klikne na taj element. Sljedeći će primjer sakriti <p> elemente na stranici kada se na njih klikne.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Click Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: khaki;
    }
</style>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
</head>
<body>
    <p>Klikni na paragraf i on će nestati.</p>
    <p>Klikni na paragraf i on će nestati.</p>
    <p>Klikni na paragraf i on će nestati.</p>
</body>
</html>


dblclick() metoda

jQuery metoda dblclick() pridružuje funkciju obrađivača događaja odabranim elementima za "dblclick" događaj. Funkcija se izvršava kada korisnik dvostruko klikne na taj element. Sljedeći će primjer sakriti <p> elemente kada se na element klikne dva puta.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Double-click Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: khaki;
    }
</style>
<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
</head>
<body>
    <p>Klikni dva puta na paragraf i on će nestati.</p>
    <p>Klikni dva puta na paragraf i on će nestati.</p>
    <p>Klikni dva puta na paragraf i on će nestati.</p>
</body>
</html>


hover() metoda

jQuery metoda hover() pridružuje jednu ili dvije funkcije rukovaoca događajima odabranim elementima koji se izvršavaju kada pokazivač miša uđe i napusti elemente. Prva funkcija izvršava se kada korisnik postavi pokazivač miša preko elementa, dok se druga funkcija izvršava kada korisnik ukloni pokazivač miša iz tog elementa. Sljedeći primjer će istaknuti <p> element kada na njega postavi kursor miša, isticanje će se ukloniti kada sklonite kursor miša.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Hover Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #f2f2f2;
    }
    p.highlight{
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Postavi kursor miša na paragraf.</p>
    <p>Postavi kursor miša na paragraf.</p>
    <p>Postavi kursor miša na paragraf.</p>
</body>
</html>


mouseenter() metoda

jQuery metoda mouseenter() daodaje funkciju obrađivača događaja odabranim elementima koja se izvršava kada miš uđe u element. Sljedeći primjer će dodati isticanje klase elementu <p> kada na njega postavite kursor miša.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Mouseenter Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #f2f2f2;
    }
    p.highlight{
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Postavi kursor miša na paragraf.</p>
    <p>Postavi kursor miša na paragraf.</p>
    <p>Postavi kursor miša na paragraf.</p>
</body>
</html>


mouseleave() metoda

jQuery metoda mouseleave() pridružuje funkciju obrađivača događaja odabranim elementima koja se izvršava kada miš napusti element. Sljedeći primjer će ukloniti isticanje klase iz elementa <p> kada iz njega uklonite kursor miša.

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Mouseleave Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #f2f2f2;
    }
    p.highlight{
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Postavi kursor miša na paragraf.</p>
    <p>Postavi kursor miša na paragraf.</p>
    <p>Postavi kursor miša na paragraf.</p>
</body>
</html>


Keyboard Events

Događaj na tastaturi aktivira se kada korisnik pritisne ili otpusti tipku na tastaturi. Evo nekoliko najčešće korištenih jQuery metoda za obradu događaja na tastaturi.



keypress() metoda

jQuery metoda keypress() pridaje funkciju obrađivača događaja odabranim elementima (obično obrazcima kontrola) koja se izvršava kada pretraživač od korisnika primi unos sa tastature. Sljedeći primjer će prikazati poruku kada se aktivira kypress događaj i prikazaće koliko se puta aktivira kada pritisnete tipku na tastaturi.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Keypress Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    div{
        margin: 20px 0;
    }
</style>
<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
</head>
<body>
    <input type="text">
    <div>Keypress: <span>0</span></div>
    <div><strong>Napomena:</strong> Upišite nešto unutar input box-a da vidite rezultat.</div>
    <p>Keypress je pokrenut.</p>
</body>
</html>


keydown() metoda

jQuery metoda keydown() pridružuje funkciju obrađivača događaja odabranim elementima (obično obrazcima kontrola) koja se izvršava kada korisnik prvi put pritisne tipku na tastaturi. Sljedeći primjer će prikazati poruku kada se aktivira keydown događaj i prikazaće koliko se puta aktivira kada pritisnete tipku na tastaturi.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Keydown Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    div{
        margin: 20px 0;
    }
</style>
<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
</head>
<body>
    <input type="text">
    <div>Keydown: <span>0</span></div>
    <div><strong>Napomnea:</strong>Upišite nešto unutar input box-a da vidite rezultat.</div>
    <p>Keydown je pokrenut.</p>
</body>
</html>


keyup() metoda

jQuery metoda keyup() pridružuje funkciju obrađivača događaja odabranim elementima (obično obrazcima kontrola) koja se izvršava kada korisnik pusti tipku na tastaturi. Sljedeći primjer će prikazati poruku kada se aktivira keyup događaja i prikazaće koliko puta se aktivira kada pritisnete i otpustite tipku na tastaturi.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Keyup Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    div{
        margin: 20px 0;
    }
</style>
<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
</head>
<body>
    <input type="text">
    <div>Keyup: <span>0</span></div>
    <div><strong>Napomnea:</strong> Upišite nešto unutar input box-a da vidite rezultat.</div>
    <p>Keyup je pokrenut.</p>
</body>
</html>


Form Events

Događaj obrasca aktivira se kada kontrola obrasca primi ili izgubi fokus ili kada korisnik izmijeni vrijednost kontrole obrasca, na primjer upisivanjem teksta u unos teksta, odabirom bilo koje opcije u okviru za odabir itd. Evo nekoliko najčešće korištenih jQuery metoda za obradu događaje u formi.



change() metoda

jQuery metoda change() pridaje funkciju obrađivača događaja elementima <input>, <textarea> i <select> koja se izvršava kada se njegova vrijednost promijeni. Sljedeći primjer će prikazati poruku upozorenja kada odaberete bilo koju opciju u padajućem okviru za odabir.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("Odabrali ste grad - " + selectedOption);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funckije Change Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("Odabrali ste grad - " + selectedOption);
    });
});
</script>
</head>
<body>
    <form>
        <label>Odaberi grad:</label>
        <select>
            <option>London</option>
            <option>Pariz</option>
            <option>New York</option>
        </select>
    </form>
  <p><strong>Napomena:</strong> Selektuj bilo koju vrijednost u padajućoj listi da biste vidjeli rezultat.</p>
</body>
</html>


focus() metoda

jQuery metoda focus() pridružuje funkciju obrađivača događaja odabranim elementima (obično obrazcima kontrola i linkova) koja se izvršava kada dobije fokus. Sljedeći primjer će prikazati poruku kada se unos teksta fokusira.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Focus Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    label{
        display: block;
        margin: 5px 0;
    }
    label span{
        display: none;
    }
</style>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
</head>
<body>
    <form>
        <label>Email: <input type="text"> <span>focus fire</span></label>
        <label>Lozinka: <input type="password"> <span>focus fire</span></label>
        <label><input type="submit" value="Prijavi se"> <span>focus fire</span></label>
    </form>
    <p><strong>Napomena:</strong> Klikni na formu ili pritisni tipku "Tab" da biste vidjeli fokus.</p>
</body>
</html>


blur() metoda

jQuery metoda blur() pridružuje funkciju obrađivača događaja elementima obrasca kao što su: <input>, <textarea>, <select> koja se izvršava kada izgubi fokus. Sljedeći primjer će prikazati poruku kada unos teksta izgubi fokus.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Blur Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    label{
        display: block;
        margin: 5px 0;
    }
    label span{
        display: none;
    }
</style>
<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
</head>
<body>
    <form>
        <label>Email: <input type="text"> <span>blur fire</span></label>
        <label>Lozinka: <input type="password"> <span>blur fire</span></label>
        <label><input type="submit" value="Prijavi se"> <span>blur fire</span></label>
    </form>
    <p><strong>Napomena:</strong> Klikni izvan forme ili pritisnite tipku "Tab" da uklonite fokus.</p>
</body>
</html>


submit() metoda

jQuery metoda submit() pridaje funkciju obrađivača događaja elementima <form> koja se izvršava kada korisnik pokušava poslati obrazac. Sljedeći primjer će prikazati poruku, zavisno o vrijednosti koju ste unijeli kada pokušate poslati obrazac.

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Format nije validan!</p>').show().fadeOut(1000);
            // Sprječavanje podnošenja obrasca
            event.preventDefault();
        }
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Form Submit Event u jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .error{
        color: red;
    }
</style>
<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Format nije validan!</p>').show().fadeOut(1000);
            // Sprječavanje podnošenja obrasca
            event.preventDefault();
        }
    });
});
</script>
</head>
<body>
    <p><strong>Napomena:</strong> Ako pokušate poslati nevaljanu vrijednost. To će proizvesti grešku.</p>
    <form action="/examples/html/action.php" method="post" id="users">
        <label for="firstName">Ime:</label>
        <input type="text" name="first-name" id="firstName">
        <input type="submit" value="Pošalji">
        <div id="result"></div>
    </form>    
</body>
</html>


Document/Window Events

Događaji se takođe pokreću u situaciji kada je stranica DOM (objektni model dokumenta) spremna ili kada korisnik promijeni veličinu ili pomiče prozor pretraživača itd. Evo nekoliko najčešće korištenih jQuery metoda za obradu takve vrste događaja.



ready() metoda

jQuery metoda ready() određuje funkciju za izvršavanje kada je DOM potpuno učitan. Sljedeći primjer će zamijeniti tekst paragrafa čim je DOM hijerarhija u potpunosti izgrađena i spremna za manipulaciju.

<script>
$(document).ready(function(){
    $("p").text("DOM je sada učitan i njime se može manipulisati.");
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Ready Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").text("DOM je sada učitan i njime se može manipulisati.");
});
</script>
</head>
<body>
    <p>Nije još učitano.</p>
</body>
</html>


resize() metoda

jQuery metoda resize() pridaje funkciji obrađivača događaja elementu prozora koji se izvršava kada se promijeni veličina prozora pretraživača. Sljedeći primjer će prikazati trenutnu širinu i visinu prozora pretraživača kada pokušate promijeniti veličinu povlačenjem njegovih uglova.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Širina prozora: " + $(window).width() + ", " + "Visina prozora: " + $(window).height());
        });
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Resize Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #f0e68c;
    }
</style>
<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Širina prozora: " + $(window).width() + ", " + "Visina prozora: " + $(window).height());
        });
    });
});
</script>
</head> 
<body>
    <p>Otvorite izlaz na novoj kartici i povucite uglove da biste promijenili veličinu prozora pretraživača.</p>
</body>
</html>


scroll() metoda

jQuery metoda scroll() pridružuje funkciju rukovatelja događajima prozoru ili pomičnim iframeovima i elementima koji se izvršavaju kad god se promijeni položaj pomicanja elementa. Sljedeći primjer će prikazati poruku kada pomičete prozor pretraživača.

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izvršavanje funkcije Scroll Event u jQuery-u</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        width: 100%;
        padding: 50px 0;
        text-align: center;
        font: bold 34px sans-serif;
        background: #f0e68c;
        position: fixed;
        top: 50px;
        display: none;
    }
    .dummy-content{
        height: 600px;
        font: 34px sans-serif;
        text-align: center;
    }
</style>
<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script> 
</head> 
<body>
    <p>Dogodio se Scroll!</p>
    <div class="dummy-content">Scroll da vidiš.</div>
    <div class="dummy-content">Scroll da vidiš.</div>
    <div class="dummy-content">Scroll da vidiš.</div>
    <div class="dummy-content">Scroll da vidiš.</div>
    <div class="dummy-content">Scroll da vidiš.</div>
</body>
</html>