JavaScript Dogodki (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>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <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

Upravljalniki dogodkov

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

Delovanje dogodkov

Za delovanje JavaScript 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.

Pregled dogodkov v JavaScriptu

Spodnja tabela prikazuje najpogosteje uporabljane dogodke (events) v JavaScriptu, razvrščene po kategorijah (miška, tipkovnica, obrazci, nalaganje itd.). Za vsak dogodek so navedeni opis delovanja, sintaksa za uporabo v HTML-ju in konkreten primer kode.

Ime	Opis	Sintaksa (HTML)	Primer
onclick	Vžge, ko se element klikne.	`<tag onclick="funkcija()">`	`<button onclick="alert('Kliknjen!')">Klik</button>`
ondblclick	Vžge, ko se element dvakrat klikne.	`<tag ondblclick="funkcija()">`	`<img ondblclick="povecaj()" src="slika.jpg">`
onmouseover	Vžge, ko se kazalec miške premakne čez element.	`<tag onmouseover="funkcija()">`	`<div onmouseover="this.style.color='rdeca'">Prekrij me</div>`
onmouseout	Vžge, ko se kazalec miške premakne ven iz elementa.	`<tag onmouseout="funkcija()">`	`<div onmouseout="this.style.color='crna'">Odstrani miško</div>`
onmousedown	Vžge, ko se gumb miške pritisne na elementu.	`<tag onmousedown="funkcija()">`	`<button onmousedown="console.log('Pritisnjeno')">Gumb</button>`
onmouseup	Vžge, ko se gumb miške spusti nad elementom.	`<tag onmouseup="funkcija()">`	`<button onmouseup="console.log('Spusteno')">Gumb</button>`
onmousemove	Vžge, ko se kazalec miške premika čez element.	`<tag onmousemove="funkcija(event)">`	`<div onmousemove="prikaziKoordinate(event)">Premikaj miško</div>`
onkeydown	Vžge, ko se tipka pritisne.	`<tag onkeydown="funkcija(event)">`	`<input onkeydown="if(event.key==='Enter') oddaj()">`
onkeyup	Vžge, ko se tipka spusti.	`<tag onkeyup="funkcija(event)">`	`<input onkeyup="iskanje(this.value)">`
onkeypress	Vžge, ko se tipka pritisne in spusti (opuščeno).	`<tag onkeypress="funkcija(event)">`	`<input onkeypress="console.log(event.charCode)">`
onchange	Vžge, ko se vrednost elementa spremeni.	`<tag onchange="funkcija()">`	`<select onchange="posodobiMoze(this.value)"></select>`
oninput	Vžge takoj, ko se vrednost elementa spremeni.	`<tag oninput="funkcija()">`	`<input oninput="preveri(this.value)">`
onfocus	Vžge, ko element dobi fokus.	`<tag onfocus="funkcija()">`	`<input onfocus="this.select()">`
onblur	Vžge, ko element izgubi fokus.	`<tag onblur="funkcija()">`	`<input onblur="preveriVeljavnost(this.value)">`
onsubmit	Vžge, ko se obrazec odda.	`<form onsubmit="funkcija(event)">`	`<form onsubmit="event.preventDefault(); oddajPodatke();"></form>`
onreset	Vžge, ko se obrazec ponastavi.	`<form onreset="funkcija()">`	`<form onreset="console.log('Ponastavljeno')"></form>`
onselect	Vžge, ko je besedilo izbrano.	`<tag onselect="funkcija()">`	`<input onselect="console.log('Izbrano')">`
onload	Vžge, ko se stran ali slika konča nalaganje.	`<body onload="funkcija()">`	`<body onload="zagonAplikacije()">`
onunload	Vžge, ko uporabnik zapusti stran (opuščeno).	`<body onunload="funkcija()">`	`<body onunload="shraniStanje()">`
onbeforeunload	Vžge, ko se okno namerava izprazniti.	`<body onbeforeunload="funkcija()">`	`<body onbeforeunload="return 'Neshranjene spremembe?'">`
onerror	Vžge, ko pride do napake pri nalaganju.	`<img onerror="funkcija()">`	`<img src="napaka.jpg" onerror="zamenjajSliko()">`
onresize	Vžge, ko se okno brskalnika spremeni velikost.	`<body onresize="funkcija()">`	`<body onresize="prilagodiPostavitev()">`
onscroll	Vžge, ko se pomakne drsnik elementa.	`<tag onscroll="funkcija()">`	`<div onscroll="naloziVsebino()"></div>`
ondrag	Vžge, ko se element vleče.	`<tag ondrag="funkcija(event)">`	`<div draggable="true" ondrag="prenosPodatkov(event)">Vleci me</div>`
ondrop	Vžge, ko se vlečen element spusti na cilj.	`<tag ondrop="funkcija(event)">`	`<div ondrop="event.preventDefault(); dodaj(event.dataTransfer.getData('text'));">Spusti tu</div>`

JavaScript Dogodki (Events)

Upravljalniki dogodkov

Delovanje dogodkov

Pregled dogodkov v JavaScriptu

Vadnica.org

Povezave

Podpora