JavaScript හි සිදුවීම් නියෝජනය

කලින් පාඩමේදී ගැටළුව විස්තර කර තිබුණි, නව මූලද්‍රව්‍ය එකතු කිරීමේදී පැනනගින, එහි විසඳුම ද ඉදිරිපත් කර ඇත. මෙම පාඩමේදී අපි ගැටළුව ඉක්මවා යාමට වඩා හොඳ ක්‍රමයක් සලකා බලමු - සිදුවීම් නියෝජනය. අපි එය විග්‍රහ කරමු.

ඔබ දැනටමත් දන්නා පරිදි, li මත ක්ලික් කිරීමෙන්, අපි එකවරම ul මත ද ක්ලික් කරමු. මෙය හැකි වන්නේ සිදුවීම් උත්ප්ලවනය හේතුවෙනි. අපිට අපගේ කාර්යය විසඳීම සඳහා මෙය භාවිතා කළ හැකිය: සිදුවීම් එක් එක් li මත අලවනවා වෙනුවට, ඒවායේ මාපිය ul මත අලවමු:

javascriptlist.addEventListener('click', function() {
  
});

දැන් සිදුවීම් පෙරළිකරුවේ this පෙරළිකරුව බැඳී ඇති මූලද්‍රව්‍යයට යොමු කරයි, සහ event.target - සිදුවීම සිදු වූ මූලද්‍රව්‍යයට යොමු කරයි:

javascriptlist.addEventListener('click', function(event) {
  console.log(this);         // අපගේ ලැයිස්තුව
  console.log(event.target); // ලැයිස්තු අයිතමය
});

අපි li මත ක්ලික් කිරීම සිදු වූ පසු, එහි අවසානයට හර්ෂක සලකුණු එකතු වන පරිදි කරමු:

javascriptlist.addEventListener('click', function(event) {
  event.target.textContent = event.target.textContent + '!';
});