Свързване на манипулатори към елементи в 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.
