Ի՞նչ է բրաուզերի իրադարձությունների մոդելը։

Օգտագործողի փոխազդեցությունների (կլիկներ, մուտքագրումներ, հենումներ) և համակարգային իրադարձությունների (էջի բեռնում, սխալներ) մշակման եղանակը վեբ բրաուզերում:

Հիմնական հասկացությունները՝

• Իրադարձություն: Կատարված գործողությունը:
• Իրադարձության մշակող: Ֆունկցիա, որը կատարվում է իրադարձության ժամանակ:
• Իրադարձության օբյեկտ (Event object): Հանձնում է մշակողին և պարունակում է տեղեկություններ իրադարձության մասին (տիպ, տարր, կոորդինատներ և այլն):

Ստանդարտ իրադարձությունների հոսք՝

1. Վերցում (Capturing phase): Իրադարձությունը իջնում է ամենաբարձր DOM տարրից (Window, Document) դեպի նպատակային տարր:
2. Նպատակի փուլ (Target phase): Իրադարձությունը հասնում է նպատակային տարրին՝ այն տարրին, որտեղ այն տեղի է ունեցել:
3. Վերելք (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);
    }
});