🖱️ Notikumi (Events)
Notikumi ļauj reaģēt uz lietotāja darbībām – klikšķiem, tastatūras nospiešanu, lapas ielādi un citiem notikumiem.
Notikumu pievienošana
Teksts
// ========================================
// addEventListener – ieteicamais veids
// ========================================
const poga = document.querySelector("#mana-poga");
poga.addEventListener("click", function(notikums) {
console.log("Noklikšķināts!", notikums);
});
// Bultiņu funkcija
poga.addEventListener("click", (e) => {
console.log("Klikšķa koordinātas:", e.clientX, e.clientY);
});
// Var pievienot vairākus apstrādātājus vienam notikumam
poga.addEventListener("click", apstrādāt1);
poga.addEventListener("click", apstrādāt2);
// Noņemt apstrādātāju (funkcijai jābūt nosauktai!)
poga.removeEventListener("click", apstrādāt1);
// Vienreizējs notikums (once opcija)
poga.addEventListener("click", () => {
console.log("Šis tiks izpildīts tikai VIENU reizi");
}, { once: true });
// ========================================
// Veci veidi (izvairīties)
// ========================================
// Inline HTML (vislielākais no tiem)
// <button onclick="apstrādāt()"> ← HTML un JS sajaukts
// Tieši uz elementa (var uzstādīt tikai VIENU)
poga.onclick = () => console.log("Klikšķis");
Biežākie notikumu veidi
Teksts
const poga = document.querySelector("button");
const laukums = document.querySelector("input");
const forma = document.querySelector("form");
const logs = window;
// ========================================
// PELES notikumi
// ========================================
poga.addEventListener("click", e => console.log("Klikšķis"));
poga.addEventListener("dblclick", e => console.log("Dubultklikšķis"));
poga.addEventListener("mouseenter", e => console.log("Pele iekšā"));
poga.addEventListener("mouseleave", e => console.log("Pele ārā"));
poga.addEventListener("mousemove", e => console.log(e.clientX, e.clientY));
poga.addEventListener("mousedown", e => console.log("Pele nospiesta"));
poga.addEventListener("mouseup", e => console.log("Pele atlaista"));
poga.addEventListener("contextmenu", e => { e.preventDefault(); console.log("Labais klikšķis"); });
// ========================================
// TASTATŪRAS notikumi
// ========================================
laukums.addEventListener("keydown", e => console.log("Nospiesta:", e.key, e.code));
laukums.addEventListener("keyup", e => console.log("Atlaista:", e.key));
laukums.addEventListener("keypress", e => console.log("Nospiesta (novecojis):", e.key));
// Tastatūras kombinācijas
document.addEventListener("keydown", e => {
if (e.ctrlKey && e.key === "s") {
e.preventDefault(); // Novērst pārlūka "Saglabāt"
console.log("Ctrl+S nospiests");
}
if (e.key === "Escape") console.log("Escape nospiests");
if (e.key === "Enter") console.log("Enter nospiests");
});
// ========================================
// FORMU notikumi
// ========================================
forma.addEventListener("submit", e => { e.preventDefault(); console.log("Forma iesniegta"); });
laukums.addEventListener("change", e => console.log("Vērtōba mainīta:", e.target.value));
laukums.addEventListener("input", e => console.log("Ievade:", e.target.value)); // Katrs taustiņš
laukums.addEventListener("focus", e => console.log("Lauks aktīvs"));
laukums.addEventListener("blur", e => console.log("Lauks pametrts"));
// ========================================
// LAPAS notikumi
// ========================================
logs.addEventListener("load", () => console.log("Visa lapa ielādēta"));
document.addEventListener("DOMContentLoaded", () => console.log("HTML parsēts"));
logs.addEventListener("resize", () => console.log("Logs mainīts", window.innerWidth));
logs.addEventListener("scroll", () => console.log("Ritina:", window.scrollY));
logs.addEventListener("beforeunload", e => { e.preventDefault(); e.returnValue = ""; }); // Pirms aizvērt
// ========================================
// PĀRVIETOŠANĀS notikumi (Drag & Drop)
// ========================================
const elements = document.querySelector(".velk-mani");
elements.addEventListener("dragstart", e => e.dataTransfer.setData("text/plain", elements.id));
elements.addEventListener("dragend", e => console.log("Velkšana beigusies"));
Notikuma objekts (Event)
Teksts
document.querySelector("form").addEventListener("submit", function(e) {
// e ir Notikuma objekts
e.preventDefault(); // Novērst noklusējuma darbību (forma neiesniedz)
e.stopPropagation(); // Apstrādāt tikai šeit, neizplatīt augšup
console.log(e.type); // "submit" – notikuma veids
console.log(e.target); // Forma, uz kuras notika notikums
console.log(e.currentTarget); // Elements, kam pievienots apstrādātājs
console.log(e.timeStamp);// Laiks ms no lapas atvēršanas
// Peles notikumiem:
// e.clientX, e.clientY – pozīcija logs iekšā
// e.pageX, e.pageY – pozīcija lapā (ar scroll)
// e.offsetX, e.offsetY – pozīcija elementa iekšā
// e.button – kurš peles poga (0=kreisā, 2=labā)
// e.ctrlKey, e.shiftKey, e.altKey, e.metaKey
// Tastatūras notikumiem:
// e.key – "Enter", "Escape", "a", " " (cilvēkam lasāms)
// e.code – "KeyA", "Space", "Enter" (fiziskā taustiņa kods)
// e.keyCode – novecojis, neieteikts!
});
// target vs currentTarget piemērs
document.querySelector("#saraksts").addEventListener("click", e => {
console.log(e.target); // Konkrētais noklikšķinātais elements
console.log(e.currentTarget); // Saraksts (kam pievienots listener)
});
Notikumu delegācija
Teksts
// PROBLĒMA: 100 saraksta elementos = 100 event listeners (resursietilpīgi!)
// const visi_li = document.querySelectorAll("li");
// visi_li.forEach(li => li.addEventListener("click", apstrādāt));
// RISINĀJUMS: viens listeners vecākelementā
const saraksts = document.querySelector("#dinamiskais-saraksts");
saraksts.addEventListener("click", function(e) {
// Pārbaudīt, vai noklikšķināts atbilstošs elements
if (e.target.matches("li")) {
e.target.classList.toggle("atzīmēts");
console.log("Atzīmēts:", e.target.textContent);
}
// Dzēšanas poga katrā rindā
if (e.target.matches(".dzēst-btn")) {
const rinds = e.target.closest("li");
rinds?.remove();
}
});
// Šis strādā arī ar DINAMISKI pievienotiem elementiem!
const jauns_li = document.createElement("li");
jauns_li.innerHTML = 'Jauns elements <button class="dzēst-btn">✕</button>';
saraksts.appendChild(jauns_li); // Delegācija automātiski darbojas!
// ========================================
// closest() – meklē vecāku ar selektoru
// ========================================
saraksts.addEventListener("click", e => {
const karte = e.target.closest(".produkta-karte");
if (karte) {
const id = karte.dataset.id;
console.log("Produkts ID:", id);
}
});
Pilns prakstisks piemērs
Teksts
<!-- Uzdevumu saraksts -->
<div id="uzdevumi-lietotne">
<form id="piev-forma">
<input type="text" id="uzd-ievade" placeholder="Jauns uzdevums..." required>
<button type="submit">Pievienot</button>
</form>
<ul id="uzd-saraksts"></ul>
</div>
<script>
const forma = document.getElementById("piev-forma");
const ievade = document.getElementById("uzd-ievade");
const saraksts = document.getElementById("uzd-saraksts");
// Pievienot uzdevumu
forma.addEventListener("submit", e => {
e.preventDefault();
const teksts = ievade.value.trim();
if (!teksts) return;
const li = document.createElement("li");
li.innerHTML = `
<span class="uzd-teksts">${escapeHTML(teksts)}</span>
<button class="pabeigt-btn">✓</button>
<button class="dzēst-btn">✕</button>
`;
saraksts.appendChild(li);
ievade.value = "";
ievade.focus();
});
// Delegācija visām darbībām
saraksts.addEventListener("click", e => {
const li = e.target.closest("li");
if (!li) return;
if (e.target.matches(".pabeigt-btn")) {
li.classList.toggle("pabeigts");
}
if (e.target.matches(".dzēst-btn")) {
li.remove();
}
});
function escapeHTML(str) {
return str.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
}
</script>