JavaScript හි සර්වත්‍ර ඉවෙන්ට් නියෝජනය

පෙර පාඩමේ දක්වා තිබූ කේතය ක්‍රියාකාරී වුවත්, දෝෂ රහිත නොවේ. අපි මෙම දෝෂ පරීක්ෂා කර වඩාත් සර්වත්‍ර විසඳුමක් ලියමු.

අපගේ කේතයේ දෝෂය පෙන්නුම් කරනු ලබන්නේ li ඇතුළත කිසියම් කුඩා ටැග් ඇති විටය. අපගේ අවස්ථාවේ මෙය ටැග් i වේවා:

html<ul>
  <li>අයිතමය <i>ඇලික් කරන ලද</i> අයිතමය</li>
  <li>අයිතමය <i>ඇලික් කරන ලද</i> අයිතමය</li>
  <li>අයිතමය <i>ඇලික් කරන ලද</i> අයිතමය</li>
  <li>අයිතමය <i>ඇලික් කරන ලද</i> අයිතමය</li>
  <li>අයිතමය <i>ඇලික් කරන ලද</i> අයිතමය</li>
</ul>

මෙම අවස්ථාවේ, i ටැගය මත ක්ලික් කිරීම ටැගයේ අවසානයට හඬ කොටස් ලකුණක් එකතු කිරීමට ඇති වනු ඇත, li ටැගයට නොවේ, අප අපේක්ෂා කළ පරිදි - මොකද event.target ලබා ගන්නේ නිශ්චිතවම ඉවෙන්ට් සිදු වූ ටැගයයි.

මෙම ගැටළුව විසඳා ගත හැක්කේ closest මෙතෙද් භාවිතා කරමිනි:

javascriptlist.addEventListener('click', function(event) {
  let li = event.target.closest('li');
  
  if (li) {
    li.innerHTML = li.innerHTML + '!';
  }
});