JavaScript හි සිදුවීම් උත්පතනය

ඔබට එකිනෙකා තුළ ස්ථර කර ඇති කිහිපයක් බ්ලොක් කිහිපයක් ඇති බව සිතන්න:

html<div id="elem1">
  <div id="elem2">
    <div id="elem3"></div>
  </div>
</div>

අපගේ div ගොනු විචල්‍යවලට සබැඳි ලබා ගනිමු:

javascriptlet elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

දැන් අපි ඒවා මත ක්ලික් කිරීමේ හසුරුවන්නන් එක් කරමු:

javascriptelem1.addEventListener('click', function() {
  alert('හරිත');
});
elem2.addEventListener('click', function() {
  alert('නිල්');
});
elem3.addEventListener('click', function() {
  alert('රතු');
});

අපගේ බ්ලොක් යම් CSS එක් කර තිරය මත පෙන්වමු:

දැන් අභ්‍යන්තරම රතු බ්ලොක් එක මත ක්ලික් කරන්න - එවිට ඔබ දකිනු ඇත, සිදුවීම මුලින් කෙසේද රතු බ්ලොක් එකේ ක්‍රියාත්මක වේ, පසුව නිල් එකේ, පසුව හරිත එකේ. මෙය තර්කානුකූලය, මන්ද ක්ලික් කිරීම අභ්‍යන්තර බ්ලොක් එක මත, ඔබ එකවර ක්ලික් කරනවා සියලුම බාහිර ඒවා මත.

එනම්, එය පෙනෙන්නේ ඔබ ක්ලික් කරන විට අභ්‍යන්තරම බ්ලොක් එක මත, click සිදුවීම ඇතිවේ මුලින්ම එහිදී, පසුව එහි මව් බ්ලොක් එකේ ක්‍රියාත්මක වේ, එහි මව් බ්ලොක් එකේ මව් බ්ලොක් එකේ සහ එසේම, යනාදී වශයෙන් ඉහළට ලගා වන තෙක්.

මෙම හැසිරීමට සිදුවීම් උත්පතනය (bubbling) යනුවෙන් හැඳින්වේ - යමෝදා ආම්ලික පුද්ගලයෙකුගේ පතනය හා සමානව. එම පුද්ගලයා මෙන්, අපගේ සිදුවීම පෙනෙන්නේ ඉහළට පැනනගිනවා, සෑම අවස්ථාවකම ක්‍රියාත්මක වෙමින් වැඩි උසකින් යුත් බ්ලොක් මත.