සිදුවීම් බුබුලු ගැසීම සහ අල්ලා ගැනීම යනු HTML DOM API හි සිදුවීම් ප්‍රචාරණය කිරීමේ ක්‍රම දෙකකි, වෙනත් මූලද්‍රව්‍යයක් තුළ මූලද්රව්යයක සිදුවීමක් සිදු වූ විට, මූලද්රව්ය දෙකම එම සිදුවීම සඳහා හසුරුව ලියාපදිංචි කර ඇත. සිදුවීම් ප්‍රචාරණ මාදිලිය මඟින් සිදුවීම ලැබෙන්නේ කුමන අනුපිළිවෙලටද යන්න තීරණය කරයි .
බුබුලු ගැසීමත් සමඟ, සිදුවීම මුලින්ම ග්‍රහණය කර හසුරුවනු ලබන්නේ අභ්‍යන්තරයේ ඇති මූලද්‍රව්‍යයෙනි.
අල්ලා ගැනීමත් සමඟ, සිදුවීම පළමුව පිටත මූලද්රව්යය විසින් ග්‍රහණය කර අභ්‍යන්තර මූලද්රව්ය වෙත ප්‍රචාරණය කරනු ලැබේ.
අල්ලා ගැනීම "උපක්‍රම" ලෙසද හැඳින්වේ, එය ප්‍රචාරණ අනුපිළිවෙල මතක තබා ගැනීමට උපකාරී වේ:
පහළට තල්ලු කරන්න, බුබුල ඉහළට
පැරණි දිනවල, නෙට්ස්කේප් විසින් සිදුවීම් ග්‍රහණය කර ගැනීම වෙනුවෙන් පෙනී සිටි අතර මයික්‍රොසොෆ්ට් විසින් සිදුවීම් බුබුලු දැමීම ප්‍රවර්ධනය කළේය. දෙකම W3C ලේඛන වස්තු ආකෘති සිදුවීම් ප්‍රමිතියේ (2000) කොටසකි .
IE <9 භාවිතා කරන්නේ සිදුවීම් බුබුලු පමණක් වන අතර IE9 + සහ සියලුම ප්‍රධාන බ්‍රව්සර් දෙකම සඳහා සහය දක්වයි. අනෙක් අතට, සංකීර්ණ DOM සඳහා සිදුවීම් බුබුලේ ක්‍රියාකාරිත්වය තරමක් අඩු විය හැකිය .
අපි භාවිතා කළ හැකිය addEventListener(type, listener, useCapture)(පෙරනිමි) බුබුළනය හෝ මාදිලිය අල්ලා එක්කෝ සඳහා සිදුවීම් පේනු ලියාපදිංචි කිරීමට. අල්ලා ගැනීමේ ආකෘතිය භාවිතා කිරීම සඳහා තුන්වන තර්කය ලෙස සම්මත කරන්න true.
උදාහරණයක්
<div>
<ul>
<li></li>
</ul>
</div>
ඉහත ව්‍යුහය තුළ, liමූලද්‍රව්‍යයේ ක්ලික් කිරීමේ සිදුවීමක් සිදුවී ඇතැයි උපකල්පනය කරන්න .
මාදිලිය ග්‍රහණය කර ගැනීමේදී, සිදුවීම divපළමුවැන්නා විසින් හසුරුවනු ඇත ( divපළමුවෙන් වෙඩි තබනු ඇති සිද්ධි හසුරුවන්නන් ක්ලික් කරන්න ), පසුව ul, පසුව ඉලක්කගත මූලද්‍රව්‍යයේ අවසාන කොටස , li.
බුබුලු ආකෘතියේ දී, ප්‍රතිවිරුද්ධ දෙය සිදුවනු ඇත: සිද්ධිය පළමුව හසුරුවනු ලබන්නේ li, පසුව ulසහ පසුව divමූලද්රව්යය විසිනි.
වැඩි විස්තර සඳහා බලන්න
පහත උදාහරණයේ දී, ඔබ උද්දීපනය කරන ලද කිසියම් මූලද්‍රව්‍යයක් මත ක්ලික් කළහොත්, සිදුවීම් ප්‍රචාරණ ප්‍රවාහයේ ග්‍රහණය කර ගැනීමේ අවධිය පළමුව සිදුවන බවත්, පසුව බුබුලු දැමීමේ අවධිය සිදුවන බවත් ඔබට පෙනේ.
var logElement = document.getElementById('log');
function log(msg) {
logElement.innerHTML += ('<p>' + msg + '</p>');
}
function capture() {
log('capture: ' + this.firstChild.nodeValue.trim());
}
function bubble() {
log('bubble: ' + this.firstChild.nodeValue.trim());
}
function clearOutput() {
logElement.innerHTML = "";
}
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);
p {
line-height: 0;
}
div {
display:inline-block;
padding: 5px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
}
div:hover {
border: 1px solid #faa;
background: #fdd;
}
<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>
JSFiddle හි තවත් උදාහරණයක් .