Event Bubbling چییە؟

کاتێک لە جاڤاسکریپتدا ڕووداوێک (Event) لەسەر توخمێک (Element) ڕوودەدات، ئەو ڕووداوە تەنها لەو توخمەدا نامێنێتەوە. بەڵکو وەک بڵقێکی ئاو بەرەو سەرەوە هەڵدەکشێت بۆ توخمە باوانەکانی (Parent Elements). ئەم دیاردەیە پێی دەوترێت Event Bubbling.

چۆن کار دەکات؟ (نموونەی یەکەم)

با سەیری نموونەیەکی سادە بکەین. کاتێک ئێمە کلیک لەسەر دوگمەیەک دەکەین کە لەناو دیڤ (div)ێکدایە، هەردووکیان وەڵامی کلیکەکە دەدەنەوە.

<div id="parent" style="padding: 20px; background: lightgray;">
  <button id="child">کلیک بکە</button>
</div>

<script>
  document.querySelector('#parent').addEventListener('click', () => alert('دایکەکە کلیک کرا!'));
  document.querySelector('#child').addEventListener('click', () => alert('منداڵەکە کلیک کرا!'));
</script>

ڕوونکردنەوە: کاتێک کلیک لەسەر دوگمەکە دەکەیت، سەرەتا ئاگاداریی "منداڵەکە کلیک کرا" دەردەکەوێت، پاشان ڕاستەوخۆ ئاگاداریی "دایکەکە کلیک کرا" دەردەکەوێت. ئەمە بەڵگەی بڵاوبوونەوەی ڕووداوەکەیە.

چۆن ڕێگری لە بڵاوبوونەوە بکەین؟

هەندێک جار نامانەوێت ڕووداوەکە بگاتە باوانەکانی. بۆ ئەم مەبەستە، جاڤاسکریپت فەرمانی event.stopPropagation() دابین دەکات.

document.querySelector('#child').addEventListener('click', (event) => {
  event.stopPropagation(); // ڕێگری لە بڵاوبوونەوە دەکات
  console.log('تەنها منداڵەکە چالاک بوو');
});

هەڵەی باو: زۆرێک لە فێرخوازان لەبیر دەکەن کە event وەک پارامێتەر بۆ ناو فانکشنەکە بنێرن، ئەمەش دەبێتە هۆی ئەوەی کۆدەکە کار نەکات.

ئاراستەی ڕووداوەکان (Event Propagation)

پێویستە بزانیت کە ڕووداوەکان بە دوو ئاراستەدا دەڕۆن:

• Bubbling: لە منداڵەوە بۆ دایک (ئەمە حاڵەتی بنەڕەتییە).
• Capturing: لە دایکەوە بۆ منداڵ (دەتوانیت بە دانانی true لە addEventListener چالاکی بکەیت).

ئاگاداری (Warning)

بەکارهێنانی بەسوود (Event Delegation)

بڵاوبوونەوەی ڕووداو تەنها کێشە نییە، بەڵکو دەتوانین سوودی لێ ببینین. بۆ نموونە ئەگەر لیستێکی درێژمان هەبێت، پێویست ناکات بۆ هەموو توخمێک addEventListener دابنێین، بەڵکو تەنها لەسەر باوانەکە (Parent) دایدەنێین.

document.querySelector('#list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('توخمی لیستەکە کلیک کرا: ' + e.target.innerText);
  }
});

ڕاهێنان

پرسیار: ئەگەر سێ توخمی لەناو یەکتردا هەبێت (Grandparent, Parent, Child) و تەنها لەسەر Parent ڕێگری لە بڵاوبوونەوە بکەیت، ئایا ڕووداوەکە دەگاتە Grandparent؟

وەڵام: نەخێر، چونکە کاتێک ڕووداوەکە دەگاتە ئاستی Parent، بەهۆی stopPropagation() ڕادەگیرێت و چیتر بەرەو سەرەوە ناچێت.