ივენთები

ბრაუზერში მრავალი მოვლენა ხდება. ზოგს თვითონ ბრაუზერი აწარმოებს - მაგალითად როცა კონტენტს ტვირთავს - ხოლო ზოგიერთს მომხმარებელი იწვევს: მაგალითად მაუსზე დაკლიკება, ფორმის ველებში ტექსტის შეყვანა და ა.შ. DOM საშუალებას გვაძლევს, რომ დოკუმენტში ასეთ მოვლენებს მოვუსმინოთ და მათზე ვირეაგიროთ.

ივენთზე მოსმენა

როცა მომხმარებელი რაიმე მოვლენას შეასრულებს, მაგალითად მაუსით დააკლიკებს კონკრეტულ ელემენტზე, ბრაუზერი ამ ელემენტზე გასცემს click მოვლენას, რომელსაც ჩვენ შეგვიძლია წინასწარ მოვუსმინოთ. მოსმენის ლოგიკა ძირითადად 3 ნაწილისგან შედგება:

• ელემენტის მოხელთება
• ელემენტზე "მოვლენის მომსმენის" (event listener) დაყენება
• "მოვლენის მომსმენში" იმ ლოგიკის განსაზღვრა, რომელიც საპასუხოდ უნდა მოხდეს.

მაგალითისთვის შევქმნათ HTML-ში ღილაკი:

<button>შეტყობინების გამოტანა</button>

ახლა კი საჭიროა მას დავუმატოთ მოვლენის მომსმენი. ამის შესრულება შეიძლება სამნაირად:

• პირდაპირ HTML-შივე გავუწერთო ივენთის მომსმენი.
• JavaScript-ს მხარეს უკვე ამოღებულ ელემენტზე გავწეროთ addEventListener.

პირდაპირ HTML-ში ჩვენ შეგვიძლია ელემენტს მივანიჭოთ onclick ატრიბუტი რომლის მნიშვნელობაც იქნება ფუნქციაზე დაძახება. აუცილებელია, რომ დოკუმენტში რომელიმე სკრიპტში განსაზღვრული იყოს ეს ფუნქცია.

<button onclick="logText()">შეტყობინების დალოგვა</button>

function logText() {
  console.log('ღილაკზე დაეკლიკა');
}

ალტერნატიული ვარიანტია ელემენტის ამოღება ჯავასკრიპტში და მასზე addEventListener მეთოდის დაძახება.

button.addEventListener('click', logText);

function logText() {
  console.log('ღილაკზე დაეკლიკა');
}

ორივე მიდგომა დალოგავს ტექსტს 'ღილაკზე დაეკლიკა', თუმცა ჩნდება კითხვა: რომელი არის ყველაზე ეფექტური მიდგომა? ორივე მიდგომის შედეგი კი იგივე არის, მაგრამ უფრო მოსახერხებელი არის addEventListener. HTML-ის ატრიბუტებში არ არსებობს ყველა ის მოვლენა, რომელიც ელემენტზე ხდება. addEventListener-ის გამოყენებით შესაძლებელია ნებისმიერი მოვლენის მოხელთება და დამატებითი პარამეტრების გადაცემა, მისი შედარებით უფრო დინამიურად გამოყენება და დაკავშირებული ივენთის მოხსნაც, რომელიც იმავე პრინციპით ხდება, როგორც დამატება.

პარამეტრი

თითოეულ ივენთის მომსმენს სჭირდება ფუნქცია რომელსაც ამ მოვლენის დროს დაუძახებს. ამ ფუნქციაში ყოველთვის შეგვიძლია განვსაზღვროთ ერთი პარამეტრი. ეს პარამეტრი არის Event ტიპის ობიექტი, სადაც ბევრი კარგი მეთოდი და თვისება არის ჩაშენებული.

<button>ივენთის გამოძახება</button>

const button = document.querySelector('button');

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

button.addEventListener('click', (event) => {
  console.log(event, this);
});

ამ შემთხვევაში ამოვიღეთ HTML-დან პირველი button და მასზე დავამატეთ ორი ივენთის მომსმენი, ორივეგან გავაყოლეთ პარამეტრში event, რომელიც სურვილისამებრ შეიძლება ავღწეროთ ისივე, როგორც მასივის callback ფუნქციებში ხდება. ორივე ფუნქცია დალოგავს event პარამეტრს და ასევე this ობიექტს. this ორივე შემთხვევაში განსხვავებული იქნება, წინა სტატიებში (რა არის This ?) განვიხილეთ this განსხვავება ჩვეულებრივ და arrow ფუნქციებში. ჩვეულებრივი ფუნქციის (function) this არის ლოკალური კონტექსტის მატარებელი. ის გვიბრუნებს იმ ობიექტს, რომელზეც მოხდა ფუნქციის გამოძახება - ჩვენს შემთხვევაში button, ხოლო arrow ფუნქციაში this წარმოადგენს გლობალური კონტექტის მნიშვნელობას.

arrow ფუნქცია ჯობია გამოიყენოთ მაშინ, როცა გსურთ უბრალოდ callback ფუნქციის აღწერა და არ გჭირდება this გამოყენება, ხოლო ჩვეულებრივი ფუნქცია ჯობია მაშინ გამოიყენოთ, როცა გჭირდებათ this.

ივენთის მოსმენის გათიშვა

წინა მაგალითებში რამდენჯერაც დავწერეთ addEventListener იმდენჯერ დავაკავშირეთ რაღაც ფუნქცია დაკლიკებასთან. დაკლიკების შემთხვევაში ყოველ ჯერზე მიწოდებული ფუნქცია გაეშვება. ზოგჯერ გვჭირდება არსებულ ელემენტებზე ივენთის მოსმენის გათიშვა, ამისათვის კი გამოიყენება removeEventListener. ასევე, შეგვიძლია addEventListener options პარამეტრებში გავატანოთ { once: true }, რისი შედეგადაც ჩვენი ივენთი მხოლოდ ერთხელ მოისმინება და შემდგომ მოხდება ივენთის მოსმენის გათიშვა. თუ ვიცით რომ რაღაც დროის შემდგომ ელემენტზე ივენთის მოსმენა უნდა შევწყვიტოთ მაშინ აუცილებელია callback ფუნქცია აღვწეროთ ცალკე ცვლადში

განვიხილოთ ივენთის მოსმენის გათიშვის მაგალითი:

<button id="logBtn">ლოგში შეტყობინების გამოტანა</button>
<button id="removeListenerBtn">პირველი ღილაკის ივენთის მომსმენის გათიშვა</button>

const logBtn = document.querySelector('#logBtn');
const removeListenerBtn = document.querySelector('#removeListenerBtn');

logBtn.addEventListener('click', handleClick);

removeListenerBtn.addEventListener('click', () => {
  console.log('გაითიშა დამლოგავი ღილაკის ივენთის მოსმენა');
  logBtn.removeEventListener('click', handleClick);
});

function handleClick() {
  console.log('რაღაც საინტერესო ტექსტი');
}

მაგალითიდან ჩანს, რომ სანამ მეორე ღილაკს დავაწვებით, მანამდე პირველი ღილაკი ლოგავს ტექსტს, მაგრამ როგორც კი მეორე ღილაკს დავაკლიკებთ მისი ივენთის მოსმენა ითიშება. removeEventListener იგივე ნაირად ღებულბოს პარამეტრებს, როგორც addEventListener.

ივენთების ჩამონათვალი

JavaScript-ში საკმაოდ ბევრი კარგი ჩაშენებული ივენთი არის. ცხრილში მოცემულია მათი (არასრული) ჩამონათვალი:

შეჯამება

JavaScript-ს გააჩნია ბევრი ჩაშენებული ივენთი სხვადასხვა სიტუაციებისთვის. იმისათვის, რომ რომელიმე ელემენტზე რაიმე ივენთს მოვუსმინოთ საჭიროა ჯერ ამ ელემენტის ამოღება და შემდგომ მასზე ივენთის მიბმა, თუ ვაპირებთ რაღაც პერიოდის მერე ივენთის მოსმენის გაუქმებას, საჭიროა ცალკე ფუნქციაში ავღწეროთ და არ გადავცეთ პირდაპირ, როგორც callback ფუნქცია. ხშირ შემთხვევაში ჯობია addEventListener გამოყენება ვიდრე HTML-ში ატრიბუტების გაწერა, რადგან იგი უფრო მეტ მოქნილობას გვთავაზობს.

იხილეთ სამაგალითო კოდები playground-ში.