Brauzerdagi voqealar modeli nima?

Veb brauzerda foydalanuvchi bilan o'zaro ta'sirlarni (bosishlar, kiritish, ustiga bosish) va tizim voqealarini (sahifa yuklash, xatoliklar) boshqarish usuli.

Asosiy tushunchalar:

• Voqea: Sodir bo'lgan harakat.
• Voqeani boshqaruvchi (Event handler): Voqea yuz berganda bajariladigan funktsiya.
• Voqealar obyekti (Event object): Boshqaruvchiga o'tkaziladi va voqea haqida ma'lumotlarni o'z ichiga oladi (turi, element, koordinatalar va boshqalar).

Standart voqea oqimi:

1. Qabool qilish (Capturing): Voqea DOMning eng yuqori elementidan (Window, Document) maqsad elementigacha tushadi. Bu bosqichdagi boshqaruvchilar birinchi bo'lib ishga tushadi.
2. Maqsad bosqichi (Target phase): Voqea voqea yuz bergan maqsad elementiga yetib keladi.
3. Bubbling (Bubbling): Voqea maqsad elementidan DOM daraxti bo'ylab yuqoriga ko'tariladi va Window ga yetadi. Bu bosqichdagi boshqaruvchilar qabool qilish va maqsad bosqichidan keyin ishga tushadi.

Boshqaruvchilarni qo'shish:

• HTML atributlari (onclick, onload): Eskirgan usul, murakkab ilovalar uchun tavsiya etilmaydi.
• DOM element xususiyatlari (element.onclick): Har bir voqea turi uchun faqat bitta boshqaruvchini tayinlash mumkin.

  // Misol
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Tugma bosildi!');
  };
  

• addEventListener metodi: Eng yaxshi usul. Bir voqea uchun bir nechta boshqaruvchilarni qo'shish va boshqarish bosqichini (qabool qilish yoki bubblash) nazorat qilish imkonini beradi.

  // Misol
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Tugma bosildi!', event);
  }, false); // false - bubblash, true - qabool qilish
  

removeEventListener metodi boshqaruvchilarni olib tashlash uchun ishlatiladi.

Voqealarni delegatsiya qilish: Bir ota elementga boshqaruvchini qo'shish orqali bolalar elementlar voqealarini boshqarish. Resurslarni tejash va dinamik mazmun bilan ishlashni soddalashtiradi.

// Delegatsiya misoli
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Roʻyxat elementiga bosildi:', event.target.textContent);
    }
});