JavaScript Dogodki (ang. Events)

JavaScript Dogodki so stvari, ki se zgodijo HTML elementom. Ko se JavaScript uporablja na HTML straneh, se odzove na te dogodke. Atribut dogodka je lahko nekaj, kar naredi brskalnik ali nekaj, kar naredi uporabnik. Če povzamem nekaj primerov, se to lahko zgodi, ko se stran naloži, ko je bilo vnosno polje spremenjeno ali ko kliknemo na gumb. Pogosto, ko se dogodki zgodijo, želimo, da se nekaj zgodi. HTML omogoča dodajanje globalnih atributov z JavaScript kodo.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Primer JavaScript Dogodkov</title>
    <style>
        .demo-box {
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            color: black;
            border: 2px solid #333;
            margin: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .clicked {
            background-color: #4CAF50;
            color: white;
        }
        .hovered {
            background-color: #2196F3;
            color: white;
        }
    </style>
</head>
<body>
    <div id="demoBox" class="demo-box" 
         onclick="handleClick()" 
         onmouseover="handleMouseOver()" 
         onmouseout="handleMouseOut()">
        Interaktivni element
    </div>

    <div id="status" style="margin: 20px;"></div>

    <script>
        const box = document.getElementById("demoBox");
        const status = document.getElementById("status");
        let clickCount = 0;

        function handleClick() {
            clickCount++;
            box.classList.toggle("clicked");
            updateStatus(`Število klikov: ${clickCount}`);
        }

        function handleMouseOver() {
            box.classList.add("hovered");
            updateStatus("Miška je nad elementom");
        }

        function handleMouseOut() {
            box.classList.remove("hovered");
            box.classList.remove("clicked");
            updateStatus("Miška je zapustila element");
        }

        function updateStatus(message) {
            status.textContent = message;
        }

        window.onload = function() {
            updateStatus("Stran je naložena in pripravljena!");
        };
    </script>
</body>
</html>

REZULTAT

Dogodki miške | Dogodki tipkovnice | Dogodki obrazcev | Dogodki nalaganja | Dogodki vsebine

Dogodki miške
onclick	Uporabnik klikne na HTML element.	Glej primer
ondblclick	Uporabnik dvakrat klikne na element HTML.	Glej primer
onmouseover	Uporabnik premakne miško čez HTML element.	Glej primer
onmouseout	Uporabnik zapusti HTML element.	Glej primer
onmousedown	Uporabnik pritisne miškin gumb na elementu.	Glej primer
onmouseup	Uporabnik spusti miškin gumb na elementu.	Glej primer
onmousemove	Uporabnik premika miško preko elementa.	Glej primer
Dogodki tipkovnice
onkeydown	Uporabnik pritisne tipko na tipkovnici.	Glej primer
onkeyup	Uporabnik spusti tipko na tipkovnici.	Glej primer
onkeypress	Uporabnik pritisne in spusti tipko.	Glej primer
Dogodki obrazcev
onchange	HTML element je bil spremenjen.	Glej primer
oninput	Vrednost vnosnega polja se spremeni.	Glej primer
onfocus	Element dobi fokus.	Glej primer
onblur	Element izgubi fokus.	Glej primer
onsubmit	Obrazec je bil poslan.	Glej primer
onreset	Obrazec je bil ponastavljen.	Glej primer
onselect	Uporabnik izbere besedilo v vnosnem polju.	Glej primer
Dogodki nalaganja
onload	Brskalnik je končal nalaganje strani.	Glej primer
onunload	Uporabnik zapušča stran.	Glej primer
onbeforeunload	Tik preden uporabnik zapusti stran.	Glej primer
onerror	Pri nalaganju se je zgodila napaka.	Glej primer
Dogodki vsebine
onresize	Okno brskalnika je bilo spremenjeno.	Glej primer
onscroll	Uporabnik se premika po strani.	Glej primer
ondrag	Element je vlečen.	Glej primer
ondrop	Element je spuščen.	Glej primer

Upravljalnike dogodkov je mogoče uporabiti za obdelavo in preverjanje uporabniškega vnosa, uporabniških dejanj in dejanj brskalnika:

Stvari, ki bi jih morali narediti vsakič, ko se stran naloži
Stvari, ki jih je potrebno narediti, ko je stran zaprta
Dejanje, ki naj se izvede, ko uporabnik klikne gumb
Vsebina, ki jo je treba preveriti, ko uporabnik vnese podatke

Za delovanje JavaScript-a z dogodki je mogoče uporabiti veliko različnih metod:

HTML Atributi dogodkov lahko neposredno izvajajo JavaScript kodo
HTML Atributi dogodkov lahko kličejo JavaScript funkcije
HTML elementom lahko dodelimo lastne funkcije obdelovalca dogodkov
Preprečimo lahko pošiljanje ali obravnavo dogodkov

V vadnici HTML DOM bodo naredili še več dogodkov.