Lidhja e përpunuesve me elementet në JavaScript

Tani le të mësojmë si t'i bëjmë elementet tona DOM të reagojnë ndaj veprimeve të përdoruesit të faqes. Për shembull, përdoruesi do të klikojë diku me miun, dhe kodi ynë si përgjigje duhet të përpunojë këtë klikim dhe të shfaqë një informacion në ekran.

Veprimet e përdoruesit, të cilat mund t'i ndjekim përmes JavaScript, quhen ngjarje. Ngjarjet mund të jenë si vijon: klik me miun në një element faqeje, vendosje e miut mbi një element faqeje ose anasjelltas - largimi i kursorit të miut nga elementi e kështu me radhë. Përveç kësaj, ka ngjarje që nuk varen nga veprimet e përdoruesit, për shembull, ngjarja e ngarkimit të faqes HTML në shfletues.

Le të bëjmë për shembull një buton, upon click of which në ekran do të shfaqet një tekst. Për fillim le të bëjmë kodin HTML të butonit:

<input id="button" type="submit">

Tani le të marrim lidhjen me butonin në një ndryshore:

let button = document.querySelector('#button');

Tani na duhet të caktojmë reagimin e butonit tonë kur klikohet mbi të. Për këtë në JavaScript ekziston një metodë e veçantë addEventListener, që si parametër të parë merr emrin e ngjarjes (klikimi në buton ka emrin 'click'), dhe si parametër të dytë - funksionin-callback, që ekzekutohet kur ndodh kjo ngjarje.

Le të bëjmë, për shembull, që me klik në buton të shfaqet ndonjë tekst:

button.addEventListener('click', function() {
	console.log('!!!');
});

Janë dhënë 3 butona:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

Bëni që me klik në butonin e parë në ekran të shfaqet numri 1, me klik në të dytin - numri 2, dhe me klik në të tretin - numri 3.