JET School

Event Delegation nədir?

Event Delegation, yəni hadisə nümayəndəliyi, JavaScript-də performans və kod sadəliyini artırmaq üçün istifadə olunan vacib bir texnikadır. Bu texnika, bir neçə elementə ayrı-ayrılıqda hadisə dinləyiciləri (event listener) əlavə etmək əvəzinə, onların ortaq bir valideyn elementinə yalnız bir dinləyici əlavə etməyə imkan verir. Beləliklə, hadisə “bubbling” adlanan bir proseslə DOM ağacında yuxarıya doğru ötürülür və valideyn element tərəfindən “tutulur”.

Məsələn, bir <ul> siyahısında 100 ədəd <li> elementi varsa və hər birinə klik hadisəsi əlavə etmək istənirsə, ən səmərəli yol <ul> elementinə bir dəfə click dinləyicisi əlavə etmək və event.target vasitəsilə hansı <li> elementinin klikləndiyini müəyyənləşdirməkdir.

Event Delegation texnikasının üstünlükləri:

  • Performans: Minlərlə elementi ayrıca dinləmək əvəzinə, yalnız bir dinləyici istifadə olunur.
  • Dinamik kontent: Sonradan DOM-a əlavə olunan elementlər üçün ayrıca hadisə bağlamağa ehtiyac yoxdur.
  • Təmiz və az kod: Kodun idarə edilməsi daha asan olur.

Məsələn:


document.querySelector('#list').addEventListener('click', function(event) {

if (event.target.tagName === 'LI') {

alert('Kliklənmiş element: ' + event.target.textContent);

}

});


Bu nümunədə #list elementi (məsələn, <ul id="list">) altında olan hər hansı bir <li> kliklənərsə, bu hadisə tutulur və uyğun reaksiya verilir. Bu texnika, xüsusən dinamik web tətbiqlərində və təkrar istifadə olunan komponentlərdə geniş istifadə olunur.

Əlaqəli terminlər:

IT sahəsini dərindən öyrənmək üçün kurslarımıza qoşulun. Ətraflı məlumat almaq üçün sorğu göndərin!