JavaScript හි මූලද්රව්යවලට සිදුවීම් හසුරුවන්නන් බැඳීම
දැන් අපගේ DOM මූලද්රව්ය අඩවියේ පරිශීලකයාගේ ක්රියාවලට ප්රතිචාර දැක්වීමට ඉගෙන ගනිමු. උදාහරණයක් ලෙස, පරිශීලකයා කොතැනක හෝ මූසිකය ක්ලික් කරයි, එවිට අපගේ කේතය ඒ ක්ලික් කිරීම processes කර තිරය මත යම් තොරතුරු පෙන්විය යුතුය.
JavaScript හරහා අපට නිරීක්ෂණය කළ හැකි පරිශීලක ක්රියා, සිදුවීම් ලෙස හැඳින්වේ. සිදුවීම් පහත සඳහන් ආකාර විය හැක: පිටුවේ මූලද්රව්යයක් මත මූසිකය ක්ලික් කිරීම, පිටුවේ මූලද්රව්යයක් මත මූසිකය hover කිරීම හෝ ඊට ප්රතිවිරුද්ධව - මූසික කර්සරය ඉවත් වීම මූලද්රව්යයෙන්, සහ එසේ ය. මීට අමතරව, පරිශීලක ක්රියාවල් මත රඳා නොපවතින සිදුවීම් ද ඇත, උදාහරණයක් ලෙස, HTML පිටුව browser ට load වීමේ සිදුවීම.
උදාහරණයක් ලෙස, අපි බොත්තමක් සාදමු, එය ක්ලික් කිරීමෙන් තිරය මත යම් පෙළක් පෙන්විය යුතුය. පළමුව බොත්තමේ HTML කේතය සාදමු:
<input id="button" type="submit">
දැන් විචල්යයකට බොත්තමේ සබැඳියක් ලබා ගනිමු:
let button = document.querySelector('#button');
දැන් අපගේ බොත්තම ක්ලික් කිරීමේදී එහි ප්රතිචාරය
සකසා ගත යුතුය. මේ සඳහා JavaScript හි
විශේෂ method එකක් ඇත addEventListener,
පළමු පරාමිතිය ලෙස සිදුවීමේ නම ගනී
(බොත්තමක් මත ක්ලික් කිරීමේ නම 'click' වේ),
සහ දෙවන පරාමිතිය ලෙස - ශ්රිත-කෝල්බැක්,
එම සිදුවීම සිදු වූ විට ක්රියාත්මක වේ.
උදාහරණයක් ලෙස, බොත්තම මත ක්ලික් කිරීමෙන් යම් පෙළක් ප්රදර්ශනය කරමු:
button.addEventListener('click', function() {
console.log('!!!');
});
3 බොත්තම් ඇත:
<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">
පළමු බොත්තම ක්ලික් කිරීමෙන්
තිරය මත අංකය 1 පෙන්වන ලෙස සකසන්න,
දෙවන බොත්තම ක්ලික් කිරීමෙන් - අංකය 2,
සහ තෙවන බොත්තම ක්ලික් කිරීමෙන් - අංකය 3.
