Միջոցառումների պատվիրակություն. JavaScript-ում իրադարձությունները կարգավորելու արդյունավետ միջոց

Երբ գործ ունենք մեծ թվով տարրերի հետ, որոնք պետք է կարգավորվեն նույն ձևով, ավելի արդյունավետ է նրանց ընդհանուր նախահայրին մեկ կարգավորիչ նշանակելը, քան յուրաքանչյուր առանձին տարրի համար մշակող: Այս մոտեցումը հայտնի է որպես միջոցառումների պատվիրակում:

Երբ իրադարձությունը տեղի է ունենում տարրի վրա, այն չի ազդում միայն այդ տարրի վրա, այն նաև ազդում է DOM ծառի բոլոր նախնիների վրա: Սա հայտնի է որպես իրադարձությունների տարածում կամ իրադարձությունների փրփրում: Իրադարձությունների պատվիրակությունն օգտվում է այս պահվածքից՝ լսելով ծնողական տարրի իրադարձությունները և օգտագործելով իրադարձությունների տարածումը իր զավակ տարրերի իրադարձությունները կարգավորելու համար: Արդյունքում, իրադարձության պատվիրակումը կարող է պարզեցնել ձեր կոդը և բարելավել դրա կատարումը:

Օրինակ

Օրինակ՝ էջի յուրաքանչյուր կոճակին սեղմելով իրադարձությունների ունկնդիր ավելացնելու փոխարեն, դուք կարող եք մեկ սեղմումով իրադարձությունների ունկնդիր ավելացնել մայր տարրին և օգտագործել event.target՝ որոշելու համար, թե որ կոճակն է սեղմվել: Սա կարող է նվազեցնել իրադարձությունների ունկնդիրների թիվը էջում և բարելավել կատարողականությունը:

Իրադարձությունների պատվիրակում իրականացնելիս կարևոր է բացահայտել ծնող տարրը, որը ներառում է բոլոր այն տարրերը, որոնց մասին ցանկանում եք լսել իրադարձությունների համար: Այս մայր տարրը կարող է լինել body տարրը կամ կոնտեյների տարրը ձեր վեբ էջի վրա: Օրինակ, հետևյալ օրինակում մենք օգտագործում ենք կոնտեյների տարր՝ IDcontainer-ով.

<div id="container">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

Լսելու համար ծնող տարրը նույնականացնելուց հետո կարող եք դրան ավելացնել իրադարձության ունկնդիր՝ օգտագործելով addEventListener() մեթոդը JavaScript-ում:

var container = document.getElementById("container");
container.addEventListener("click", function(event) {
  // Code to handle the event
});

Իրադարձությունների ունկնդիր ֆունկցիայի ներսում դուք կարող եք օգտագործել event.target հատկությունը՝ որոշելու, թե որ տարրն է գործարկել իրադարձությունը: Կոճակի վրա սեղմելու իրադարձության դեպքում event.target-ը կլինի հենց կոճակի տարրը.

var container = document.getElementById("container");
container.addEventListener("click", function(event) {
  if (event.target.nodeName === "BUTTON") {
    // Code to handle the button click
  }
});

Այս օրինակում մենք օգտագործում ենք event.target-ի nodeName հատկությունը՝ ստուգելու համար, թե արդյոք կտտացված տարրը կոճակ է: Սա թույլ է տալիս մեզ գործարկել անհրաժեշտ կոդը միայն կոճակի վրա սեղմելիս՝ առանց յուրաքանչյուր կոճակին առանձին իրադարձություն ունկնդիր ավելացնելու:

Եզրակացություն

Այս մոտեցումը ոչ միայն պարզեցնում է կոդը, այլև բարելավում է դրա կատարումը, քանի որ մենք այժմ օգտագործում ենք միայն մեկ իրադարձություն ունկնդիր՝ էջի յուրաքանչյուր կոճակի համար մեկի փոխարեն: Ավելին, եթե մենք ունենք մեծ թվով մանկական տարրեր, իրադարձությունների պատվիրակումը կարող է ավելի արդյունավետ և արդյունավետ միջոց լինել իրադարձությունները վարելու համար: Այսպիսով, հաջորդ անգամ, երբ դուք աշխատում եք մի նախագծի վրա, որը պահանջում է իրադարձությունների մշակում, մտածեք միջոցառման պատվիրակման մասին՝ ձեր կոդը պարզեցնելու և կատարողականությունը բարելավելու համար:

Ավելի շատ բովանդակություն PlainEnglish.io կայքում: Գրանցվեք մեր անվճար շաբաթական տեղեկագրին: Միացեք մեր Discord համայնքին և հետևեք մեզ Twitter, LinkedIn և-ում։ YouTube.

Իմացեք, թե ինչպես զարգացնել իրազեկությունը և որդեգրումը ձեր ստարտափի համար Circuit-ի միջոցով: