09. Notikumi (events)

Notikumi (events) ļauj JavaScript reaģēt uz lietotāja darbībām — klikšķiem, tastatūras ievadi, peles kustību, formu nosūtīšanu un citām darbībām.

addEventListener

Ieteicamais veids notikumu pievienošanai:

const poga = document.querySelector('#poga');

poga.addEventListener('click', function() {
console.log('Poga nospiesta!');
});

// Ar bultiņu funkciju
poga.addEventListener('click', () => {
console.log('Poga nospiesta!');
});

Populārākie notikumi

Notikuma objekts (event)

Katrs notikuma apstrādātājs saņem notikuma objektu ar papildu informāciju:

document.addEventListener('click', (event) => {
console.log(event.target); // elements, uz kura klikšķināts
console.log(event.type); // 'click'
console.log(event.clientX); // peles X koordināte
console.log(event.clientY); // peles Y koordināte
});

document.addEventListener('keydown', (event) => {
console.log(event.key); // nospiestais taustiņš, piem. 'Enter'
console.log(event.code); // taustiņa kods, piem. 'KeyA'
});

preventDefault

Novērš noklusēto uzvedību (piemēram, formas nosūtīšanu vai saites atvēršanu):

const forma = document.querySelector('form');
forma.addEventListener('submit', (event) => {
event.preventDefault(); // nenosūta formu
console.log('Forma apstrādāta ar JS!');
});

Notikumu delegācija

Efektīvs veids, kā apstrādāt notikumus dinamiskam saturam — pievienojam vienu apstrādātāju vecākelementam:

const saraksts = document.querySelector('#saraksts');

saraksts.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('izcelts');
}
});

// Darbojas arī ar elementiem, kas pievienoti vēlāk!

Praktisks piemērs: interaktīva forma

const ievade = document.querySelector('#meklesana');
const rezultati = document.querySelector('#rezultati');
const vardi = ['Anna', 'Jānis', 'Marta', 'Pēteris', 'Līga'];

ievade.addEventListener('input', () => {
const teksts = ievade.value.toLowerCase();
const filtreti = vardi.filter(v => v.toLowerCase().includes(teksts));
rezultati.innerHTML = filtreti
.map(v => `<li>${v}</li>`)
.join('');
});