რა არის მოვლენების მოდელი ბრაუზერში?

ვებ ბრაუზერში მომხმარებლის ურთიერთქმედებების (კლიკები, შეყვანა, მიბმა) და სისტემური მოვლენების (გვერდის ჩატვირთვა, შეცდომები) დამუშავების მეთოდი.

ძირითადი კონცეფციები:

მოვლენა: მოხდა მოქმედება.
მოვლენის დამუშავებელი: ფუნქცია, რომელიც შესრულდება მოვლენის დროს.
მოვლენის ობიექტი (Event object): გადაეცემა დამუშავებელს და შეიცავს ინფორმაციას მოვლენის შესახებ (ტიპი, ელემენტი, კოორდინატები და სხვა).

სტანდარტული მოვლენის ნაკადი:

მჭიდრო (Capturing phase): მოვლენა გადადის DOM-ის უმაღლეს ელემენტიდან (Window, Document) მიზნობრივ ელემენტამდე. ამ ეტაპზე დამუშავებლები პირველები მუშაობენ.
მიზნობრივი ფაზა (Target phase): მოვლენა აღწევს მიზნობრივ ელემენტს - იმ ელემენტს, სადაც მოხდა.
გაფართოება (Bubbling phase): მოვლენა ავიდა მიზნობრივ ელემენტიდან DOM-ის ხეით უკან Window-მდე. ამ ეტაპზე დამუშავებლები მუშაობენ შემდეგ ფაზაზე.

დამუშავებლების დამატება:

HTML ატრიბუტები (onclick, onload): მოძველებული მეთოდი, არ არის რეკომენდებული რთული აპლიკაციებისათვის.
DOM ელემენტების თვისებები (element.onclick): შეიძლება მინიჭდეს მხოლოდ ერთი დამუშავებელი თითოეულ მოვლენის ტიპზე ელემენტისთვის.
```
// მაგალითი
const button = document.querySelector('button');
button.onclick = function() {
    alert('დაწკაპუნდა ღილაკზე!');
};
```
addEventListener მეთოდი: სასურველი მეთოდი. საშუალებას აძლევს დაამატოთ რამდენიმე დამუშავებელი ერთ მოვლენისათვის და აკონტროლოთ ფაზა (მჭიდრო ან გაფართოება):
```
// მაგალითი
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
    console.log('კლიკი ღილაკზე!', event);
}, false); // false - გაფართოება, true - მჭიდრო
```

removeEventListener მეთოდი გამოიყენება დამუშავებლების წასაშლელად:

მოვლენების დელეგირება:

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

// დელეგირების მაგალითი
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('სია ელემენტი:', event.target.textContent);
    }
});