Binding van gebeurtenishanteerders aan elemente in JavaScript

Laat ons nou ons DOM elemente leer om te reageer op die aksies van 'n webwerfgebruiker. Byvoorbeeld, as 'n gebruiker êrens met die muis klik, moet ons kode hierdie klik hanteer en inligting op die skerm vertoon.

Die aksies van die gebruiker wat ons deur JavaScript kan opspoor, word gebeurtenisse genoem. Gebeure kan die volgende wees: 'n muisklik op 'n bladsyelement, die muis wat oor 'n bladsyelement beweeg of omgekeerd - die muiswyser wat van 'n element af beweeg, ensovoorts. Verder is daar gebeurtenisse wat nie van die gebruiker se aksies afhang nie, byvoorbeeld, die gebeurtenis wanneer die HTML-bladsy in die blaaier gelaai word.

Kom ons maak byvoorbeeld 'n knoppie wat, wanneer dit gedruk word, 'n teks op die skerm vertoon. Eerstens, maak ons die HTML-kode vir die knoppie:

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

Laat ons nou 'n verwysing na die knoppie in 'n veranderlike kry:

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

Nou moet ons die reaksie van ons knoppie op 'n klik daarop definieer. Hiervoor het JavaScript 'n spesiale metode addEventListener, wat as eerste parameter die naam van die gebeurtenis neem ('n knoppieklik het die naam 'click'), en as tweede parameter - 'n callback-funksie, wat uitgevoer word wanneer die gebeurtenis plaasvind.

Kom ons, byvoorbeeld, vertoon 'n teks wanneer op die knoppie geklik word:

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

Daar is 3 knoppies:

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

Sorg dat, wanneer op die eerste knoppie geklik word, die nommer 1 op die skerm vertoon word, wanneer op die tweede geklik word - die nommer 2, en wanneer op die derde geklik word - die nommer 3.