Браузердеги окуялар моделин эмне деп айтасыз…

Веб-браузерде колдонуучунун өз ара аракеттенүүлөрүн (басуулар, киргизүүлөр, көрсөтүүлөр) жана системдик окуяларды (баракчаны жүктөө, каталар) иштетүүнүн ыкмасы.

Негизги түшүнүктөр:

Окуя: Туура келген иш-аракет.
Окуя иштеткич: Окуя болуп өткөндө ишке ашкан функция.
Окуя объектиси (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);
    }
});

Браузердеги окуялар моделин эмне деп айтасыз?