JavaScript HTML DOM Dogodki

DOM dogodki omogočajo, da na akcije uporabnika (klik, tipkanje, premik miške) ali stanja brskalnika (nalaganje, fokus) reagiramo s kodo. Na tej strani boš spoznal osnove dela z addEventListener, uporabo preventDefault in najpogostejše dogodke na enostavnih, interaktivnih primerih.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript HTML DOM dogodki</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        body {
            line-height: 1.45;
            padding: 20px;
            font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        }
        h1 {
            margin-top: 0;
            font-size: 1.6rem;
        }
        p.vodilo {
            max-width: 800px;
        }
        .primer {
            border: 1px solid;
            border-radius: 8px;
            padding: 15px;
            margin: 18px 0 26px;
        }
        .primer h2 { 
            margin: 0 0 8px 0; 
            font-size: 1.15rem; 
        }
        .primer p { 
            margin: 6px 0; 
        }
        .primer code {
            padding: 1px 6px;
            border: 1px solid;
            border-radius: 4px;
        }
        .vrstica { 
            display: flex; 
            gap: 8px; 
            align-items: center; 
            flex-wrap: wrap; 
        }
        .vrstica input, .vrstica button {
            padding: 6px 10px; 
            border-radius: 6px; 
            border: 1px solid; 
            font-size: 14px;
        }
        .izpis {
            margin-top: 10px; 
            white-space: pre-wrap; 
            line-height: 1.5; 
            border: 1px dashed; 
            border-radius: 6px; 
            padding: 8px;
        }
    </style>
</head>
<body>
    <h1>JavaScript HTML DOM dogodki</h1>
    <p class="vodilo">DOM dogodki omogočajo, da koda reagira na akcije uporabnika (kliki, tipkanje, premik miške) in 
        spremembe v brskalniku/dokumentu (nalaganje, fokus). Spodaj je 5 kratkih primerov (klik, vnos, tipke, fokus/blur, 
        oddaja obrazca), ki jih lahko prosto spreminjaš in takoj vidiš rezultat.</p>
    
    <div class="primer" id="primer1">
        <h2>Primer 1 – click dogodek</h2>
        <p>Koda: <code>el.addEventListener("click", ...)</code></p>
        <div class="vrstica">
            <button id="gumb1">Klikni me</button>
            <span id="stanje1">Še ni klika.</span>
        </div>
        <div class="izpis" id="izpis1"></div>
    </div>
    
    <div class="primer" id="primer2">
        <h2>Primer 2 – input dogodek (živi predogled)</h2>
        <p>Koda: <code>input.addEventListener("input", ...)</code></p>
        <div class="vrstica">
            <label for="ime">Ime:</label>
            <input id="ime" type="text" placeholder="vpiši svoje ime" />
            <span>Pozdrav: <strong id="predogledImena">neznanec</strong></span>
        </div>
        <div class="izpis" id="izpis2"></div>
    </div>
    
    <div class="primer" id="primer3">
        <h2>Primer 3 – keydown dogodek</h2>
        <p>Koda: <code>el.addEventListener("keydown", (e) => e.key)</code></p>
        <input id="ciljTipk" type="text" placeholder="pritisni nekaj tipk..." />
        <div class="izpis" id="izpis3">Zadnja tipka: —</div>
    </div>
    
    <div class="primer" id="primer4">
        <h2>Primer 4 – focus in blur</h2>
        <p>Koda: <code>el.addEventListener("focus"/"blur", ...)</code></p>
        <input id="vnosFokus" type="text" placeholder="klikni sem"
           style="padding:6px;border:2px solid #ccc;border-radius:6px;outline:none;" />
        <div class="izpis" id="izpis4"></div>
    </div>
    
    <div class="primer" id="primer5">
        <h2>Primer 5 – submit in preventDefault()</h2>
        <p>Koda: <code>form.addEventListener("submit", (e) => e.preventDefault())</code></p>
        <form id="obrazecNovice">
        <div class="vrstica">
            <label for="poljeEposta">E-pošta:</label>
            <input id="poljeEposta" type="email" required placeholder="ti@example.com" />
            <button type="submit">Pošlji</button>
        </div>
        </form>
        <div class="izpis" id="izpis5"></div>
    </div>

    <script>
        // Primer 1
        (function () {
            const gumb = document.getElementById("gumb1");
            const stanje = document.getElementById("stanje1");
            const izpis = document.getElementById("izpis1");
            let stevec = 0;
            
            gumb.addEventListener("click", function () {
                stevec++;
                stanje.textContent = "Kliknili ste " + stevec + "×.";
                izpis.textContent = "Dogodek: click\nSkupno klikov: " + stevec;
            });
        })();
        
        // Primer 2
        (function () {
            const vnos = document.getElementById("ime");
            const predogled = document.getElementById("predogledImena");
            const izpis = document.getElementById("izpis2");
            
            vnos.addEventListener("input", function () {
                const v = vnos.value.trim();
                predogled.textContent = v ? v : "neznanec";
                izpis.textContent = "Dogodek: input\nVrednost: " + (v || "(prazno)");
            });
        })();
        
        // Primer 3
        (function () {
            const polje = document.getElementById("ciljTipk");
            const izpis = document.getElementById("izpis3");
            
            polje.addEventListener("keydown", function (e) {
                izpis.textContent = "Zadnja tipka: " + e.key + " (code: " + e.code + ")";
            });
        })();
        
        // Primer 4
        (function () {
            const vnos = document.getElementById("vnosFokus");
            const izpis = document.getElementById("izpis4");
            
            vnos.addEventListener("focus", function () {
                vnos.style.borderColor = "#2ecc71";
                vnos.style.boxShadow = "0 0 0 3px rgba(46, 204, 113, .25)";
                izpis.textContent = "Dogodek: focus (polje je dobilo fokus)";
                izpis.className = "izpis v redu";
            });
            
            vnos.addEventListener("blur", function () {
                vnos.style.borderColor = "#ccc";
                vnos.style.boxShadow = "none";
                izpis.textContent = "Dogodek: blur (polje je izgubilo fokus)";
                izpis.className = "izpis";
            });
        })();
        
        // Primer 5
        (function () {
            const obrazec = document.getElementById("obrazecNovice");
            const poljeEposta = document.getElementById("poljeEposta");
            const izpis = document.getElementById("izpis5");
            
            obrazec.addEventListener("submit", function (e) {
                e.preventDefault();
                const vrednost = poljeEposta.value.trim();
                
                if (!vrednost) {
                    izpis.textContent = "Prosim, vnesi e-poštni naslov.";
                    izpis.className = "izpis napaka";
                    return;
                }
                izpis.textContent = "Hvala! (simulirano) Obrazec bi oddal: " + vrednost;
                izpis.className = "izpis v redu";
                obrazec.reset();
            });
        })();
    </script>
</body>
</html>

REZULTAT

Miška in kolo
click	Element je kliknjen.	Glej primer
dblclick	Element je dvakrat kliknjen.	Glej primer
mousedown	Gumb miške je pritisnjen nad elementom.	Glej primer
mouseup	Uporabnik spusti gumb miške nad elementom.	Glej primer
mousemove	Kazalec se premakne nad element.	Glej primer
mouseenter	Kazalec se premakne na element.	Glej primer
mouseleave	Kazalec je premaknjen iz elementa.	Glej primer
mouseover	Kazalec se premakne na element.	Glej primer
mouseout	Kazalec je premaknjen iz elementa.	Glej primer
wheel	Kolešček miške se premika gor ali dol po elementu.	Glej primer
contextmenu	Z desnim klikom elementa odpremo kontekstni meni.	Glej primer
↑ Obrazci in fokus
change	Vsebina obrazca se je spremenila.	Glej primer
input	Element dobi uporabniški vnos.	Glej primer
invalid	Element je neveljaven.	Glej primer
reset	Obrazec je ponastavljen.	Glej primer
submit	Obrazec je oddan.	Glej primer
select	Uporabnik izbere neko besedilo.	Glej primer
focus	Element dobi fokus.	Glej primer
focusin	Element bo kmalu dobil fokus.	Glej primer
focusout	Element bo kmalu izgubil fokus.	Glej primer
blur	Element izgubi fokus.	Glej primer
↑ Povleci in spusti (Drag & Drop)
drag	Element se vleče.	Glej primer
dragstart	Vlečenje elementa se je sprožilo.	Glej primer
dragover	Vlečeni element je nad spustnim ciljem.	Glej primer
dragenter	Vlečeni element vstopi v ciljno tarčo.	Glej primer
dragleave	Element zapusti ciljno tarčo.	Glej primer
dragend	Vlečenje elementa se je končalo.	Glej primer
drop	Vlečeni element je spuščen na ciljno tarčo.	Glej primer
↑ Mediji (audio/video)
canplay	Brskalnik lahko začne predvajati predstavnost.	Glej primer
canplaythrough	Predvaja lahko brez ustavljanja za medpomnenje.	Glej primer
durationchange	Trajanje medija je spremenjeno.	Glej primer
ended	Medij se je končal.	Glej primer
error	Med nalaganjem datoteke je prišlo do napake.	Glej primer
loadeddata	Medijski podatki so naloženi.	Glej primer
loadedmetadata	Metapodatki so naloženi.	Glej primer
loadstart	Začetek nalaganja medija.	Glej primer
pause	Predstavnost je zaustavljena.	Glej primer
play	Predvajanje se je začelo ali se nadaljuje.	Glej primer
playing	Predstavnost se aktivno predvaja.	Glej primer
progress	Prenašanje medijskih podatkov.	Glej primer
ratechange	Sprememba hitrosti predvajanja.	Glej primer
seeked	Preskok na položaj končan.	Glej primer
seeking	Začetek preskoka na položaj.	Glej primer
suspend	Namenoma prekinjeno prenašanje.	Glej primer
timeupdate	Položaj predvajanja se je spremenil.	Glej primer
waiting	Premor zaradi medpomnjenja ipd.	Glej primer
volumechange	Glasnost medija je spremenjena.	Glej primer
↑ Stran, navigacija in stanje
DOMContentLoaded	Pripravljen za manipulacijo.	Glej primer
load	Objekt se je naložil.	Glej primer
beforeunload	Preden bo dokument naložen.	Glej primer
resize	Pogled dokumenta je spremenjen.	Glej primer
scroll	Drsni trak se premika.	Glej primer
hashchange	Prišlo je do spremembe URL-ja.	Glej primer
popstate	Zgodovina okna se spremeni.	Glej primer
pagehide	Uporabnik zapusti spletno stran.	Glej primer
pageshow	Uporabnik pride na spletno stran.	Glej primer
fullscreenchange	Element v celozaslonskem načinu.	Glej primer
fullscreenerror	Ni mogoče preklopiti v celozaslonski način.	Glej primer
online / offline	Brskalnik zazna spremembo statusa povezave (povezan/nepovezan).	Glej primer
storage	Območje spletne shrambe je posodobljeno.	Glej primer
message	Sporočilo je prejeto prek vira dogodka.	Glej primer
open	Odprta je povezava z izvirom dogodka.	Glej primer
↑ Animacije, prehodi, tiskanje in odložišče
animationstart	Animacija se začne.	Glej primer
animationend	Animacija se je zaključila.	Glej primer
animationiteration	Animacija se ponavlja.	Glej primer
transitionend	Prehod se je zaključil.	Glej primer
afterprint	Stran se je začela tiskati.	Glej primer
beforeprint	Stran bo natisnjena.	Glej primer
copy	Vsebina elementa se kopira.	Glej primer
cut	Vsebina elementa je izrezana.	Glej primer
paste	Vsebina je prilepljena v element.	Glej primer
pregled odložišča	Osnovni dogodki, ki se sprožijo pri delu z odložiščem: copy, cut in paste.	Glej primer