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.