Прывязванне апрацоўшчыкаў да элементаў у JavaScript

Давайце цяпер навучым нашы DOM элементы рэагаваць на дзеянні карыстальніка сайта. Напрыклад, карыстальнік націсне куды-небудзь мышкай, а наш код у адказ павінен будзе апрацаваць гэта націсканне і вывесці на экран якую-небудзь інфармацыю.

Дзеянні карыстальніка, якія мы можам адсочыць праз JavaScript, называюцца падзеямі. Падзеі могуць быць наступнымі: клік мышкай на элемент старонкі, навядзенне мышкай на элемент старонкі ці наадварот - сыход курсара мышы з элемента і так далей. Акрамя таго, ёсць падзеі, якія не залежаць ад дзеянняў карыстальніка, напрыклад, падзея па загрузцы HTML старонкі ў браўзэр.

Давайце для прыкладу зробім кнопку, па націску на якую на экран алертам выйдзе які-небудзь тэкст. Для пачатку зробім HTML код кнопкі:

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

Атрымаем цяпер спасылку на кнопку ў зменную:

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

Цяпер нам неабходна задаць рэакцыю нашай кнопкі пры кліку па ёй. Для гэтага ў JavaScript існуе спецыяльны метад addEventListener, першым параметрам які прымае назву падзеі (клік на кнопку мае назву 'click'), а другім параметрам - функцыю-коллбэк, якая выконваецца пры ўзнікненні гэтай падзеі.

Давайце, напрыклад, па кліку на кнопку вывядзем які-небудзь тэкст:

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

Даны 3 кнопкі:

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

Зрабіце так, каб па кліку на першую кнопку на экран вывадзілася лік 1, па кліку на другую - лік 2, а па кліку на трэцюю - лік 3.