JavaScript - Event Listeners

Razumijevanje Event Listeners

Slušatelji događaja (Event Listeners) su poput obrađivača događaja, osim što određenom događaju možete dodijeliti onoliko slušatelja događaja koliko želite. Da bismo razumjeli kako slušatelji događaja zapravo rade, pogledajmo jednostavan primjer. Pretpostavimo da ste stvorili dvije funkcije i pokušavate obe izvršiti na klik dugmeta pomoću onclick rukovatelja događaja, kao što je prikazano u sljedećem primjeru: 

<button id="myBtn">Klikni</button>
 
<script>
// Definisanje prilagođenih funkcija
function firstFunction() {
    alert("Prva funkcija je uspješno izvršena!");
}
 
function secondFunction() {
    alert("Druga funkcija je uspješno izvršena!");
}
 
// Odabir elementa dugmeta
var btn = document.getElementById("myBtn");
 
// Dodjeljivanju rukovatelja događajima dugmetu
btn.onclick = firstFunction;
btn.onclick = secondFunction; // Prepisuje prvi
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodjeljivanje više rukovatelja događajima za jedan događaj</title>
</head>
<body>
    <button id="myBtn">Klikni</button>
 
    <script>
    // Definisanje prilagođenih funkcija
    function firstFunction() {
        alert("Prva funkcija je uspješno izvršena!");
    }
     
    function secondFunction() {
        alert("Druga funkcija je uspješno izvršena!");
    }
     
    // Odabir elementa dugmeta
    var btn = document.getElementById("myBtn");
     
    // Dodjeljivanju rukovatelja događajima dugmetu
    btn.onclick = firstFunction;
    btn.onclick = secondFunction; // Prepisuje prvu
    </script>
</body>
</html>

Ako pokrenete primjer i kliknete element dugmeta, izvršiće se samo secondFunction(), jer dodjeljivanje drugog rukovatelja događaja prepisuje prvi. Ovo je glavni nedostatak ovog klasičnog modela događaja - možete dodijeliti samo jedan rukovatelj događajima određenom događaju na određenom elementu, tj. jednu funkciju događaja po elementu. Da bi se riješio ovog problema, W3C je predstavio fleksibilniji model događaja koji se naziva slušatelji događaja (event listeners). Bilo koji HTML element može imati više slušatelja događaja, zbog toga možete dodijeliti više funkcija istom događaju za isti element, kao što je prikazano u sljedećem primjeru: 

<button id="myBtn">Klikni</button>
 
<script>
// Definisanje prilagođenih funkcija
function firstFunction() {
    alert("Prva funkcija je uspješno izvršena!");
}
 
function secondFunction() {
    alert("Druga funkcija je uspješno izvršena!");
}
 
// Odabir elementa dugmeta
var btn = document.getElementById("myBtn");
 
// Dodjeljivanje preslušavača događaja tipki
btn.addEventListener("click", firstFunction);
btn.addEventListener("click", secondFunction);
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodjeljivanje više slušatelja događaja jednom događaju</title>
</head>
<body>
    <button id="myBtn">Klikni</button>
 
    <script>
    // Definisanje prilagođenih funkcija
    function firstFunction() {
        alert("Prva funkcija je uspješno izvršena!");
    }
     
    function secondFunction() {
        alert("Druga funkcija je uspješno izvršena!");
    }
     
    // Odabir elementa dugmeta
    var btn = document.getElementById("myBtn");
     
    // Dodjeljivanje preslušavača događaja tipki
    btn.addEventListener("click", firstFunction);
    btn.addEventListener("click", secondFunction);
    </script>
</body>
</html>

Sada, ako pokrenete gornji primjer i kliknete na dugme, izvršiće se obe funkcije. Pored tipa događaja i parametra funkcije slušatelja, addEventListener() prihvata još jedan logički parametar useCapture. Ovo je neobavezni parametar koji specifikuje hoće li se koristiti bubbling događaja ili hvatanje (capturing) događaja. Njegova osnovna sintaksa je: 

target.addEventListener(event, function, useCapture);

Događaji bubbling i capturing su dva načina širenja događaja. O širenju događaja detaljno ćemo naučiti u narednim lekcijama.


Dodavanje slušalaca događaja za različite tipove događaja

Rukovatelju događajima, možete dodijeliti različite slušatelje događaja različitim vrstama događaja na istom elementu. Sljedeći primjer će dodijeliti različite funkcije preslušavanja događaja događajima "klik", "prelazak mišem preko dugmeta" i "sklanjanje mišem sa dugmeta". 

<button id="myBtn">Klikni</button>
 
<script>
// Odabir elementa dugmeta
var btn = document.getElementById("myBtn");
 
// Definisanje prilagođenih funkcija
function sayHello() {
    alert("Ćao, kako si?");
}
 
function setHoverColor() {
    btn.style.background = "yellow";
}
 
function setNormalColor() {
    btn.style.background = "";
}
 
// Dodjeljivanje preslušavača događaja tipki
btn.addEventListener("click", sayHello);
btn.addEventListener("prelazak mišem", setHoverColor);
btn.addEventListener("sklanjanje miša", setNormalColor);
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Priključivanje različitih slušatelja događaja različitim vrstama događaja</title>
</head>
<body>
    <button id="myBtn">Klikni</button>
 
    <script>
    // Odabir elementa dugmeta
    var btn = document.getElementById("myBtn");
     
    // Definisanje prilagođenih funkcija
    function sayHello() {
        alert("Ćao, kako si?");
    }
     
    function setHoverColor() {
        btn.style.background = "yellow";
    }
     
    function setNormalColor() {
        btn.style.background = "";
    }
     
    // Dodjeljivanju preslušavača događaja tipki
    btn.addEventListener("click", sayHello);
    btn.addEventListener("prelazak mišem", setHoverColor);
    btn.addEventListener("sklanjanje miša", setNormalColor);
    </script>
</body>
</html>

Dodavanje slušatelja događaja u objekt window

Metoda addEventListener() omogućava vam dodavanje slušatelja događaja u bilo koji HTML DOM element objekta dokumenta, objekta window ili bilo koji drugi objekt koji podržava događaje, npr. XMLHttpRequest objekt. Evo primjera koji slušalicu događaja priključuje na prozor (window) "resize" događaja: 

<div id="result"></div>
 
<script>
// Definiranje funkcije slušača događaja
function displayWindowSize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var size = "Width: " + w + ", " + "Height: " + h;
    document.getElementById("result").innerHTML = size;
}
 
// Priključivanje funkcije slušatelja događaja na događaj promjene veličine prozora (winodw)
window.addEventListener("resize", displayWindowSize);
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodavanje slušatelja događaja događaju promjene veličine prozora (window)</title>
</head>
<body>
    <div id="result"></div>
 
    <script>
    // Definiranje funkcije slušača događaja
    function displayWindowSize() {
        var w = window.innerWidth;
        var h = window.innerHeight;
        var size = "Width: " + w + ", " + "Height: " + h;
        document.getElementById("result").innerHTML = size;
    }
     
    // Priključivanje funkcije slušatelja događaja na događaj promjene veličine prozora (winodw)
    window.addEventListener("resize", displayWindowSize);
    </script>
    <p><strong>Napomena:</strong> Promijenite veličinu prozora pretraživača da biste vidjeli kako radi.</p>
</body>
</html>

Uklanjanje Event Listeners

Možete koristiti metodu removeEventListener() da biste uklonili slušatelj događaja koji je prethodno pridružen addEventListener(). Pogledajmo primjer: 

<button id="myBtn">Klikni</button>
 
<script> 
// Definisanje funkcije
function greetWorld() {
    alert("Hello World!");
}
 
// Odabir elementa dugmeta
var btn = document.getElementById("myBtn");
 
// Priključivanje slušatelja događaja (event listener)
btn.addEventListener("click", greetWorld);
 
// Uklanjanje  slušatelja događaja (event listener)
btn.removeEventListener("click", greetWorld);
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Uklanjanje Event Listener</title>
</head>
<body>
    <button id="myBtn">Klikni</button>
 
    <script> 
    // Definisanje funkcije
    function greetWorld() {
        alert("Hello World!");
    }
     
    // Odabir elementa dugmeta
    var btn = document.getElementById("myBtn");
     
    // Priključivanje slušatelja događaja (event listener)
    btn.addEventListener("click", greetWorld);
     
    // Uklanjanje slušatelja događaja (event listener)
    btn.removeEventListener("click", greetWorld);
    </script>
    <p><strong>Napomena:</strong> Ako kliknete na gumb "Klikni", 
    ništa se neće dogoditi jer se preslušavač događaja uklanja.</p>
</body>
</html>