ஜாவாஸ்கிரிப்ட் நிகழ்வு பிரதிநிதித்துவம்: செயல்திறன் மற்றும் நினைவகத் திறனை மேம்படுத்துதல்

நவீன வலை மேம்பாட்டில், செயல்திறன் மற்றும் நினைவக மேலாண்மை முதன்மையானவை. பயன்பாடுகளின் சிக்கல்தன்மை அதிகரிக்கும்போது, திறமையான நிகழ்வு கையாளுதல் அவசியமாகிறது. ஜாவாஸ்கிரிப்ட் நிகழ்வு பிரதிநிதித்துவம் என்பது உங்கள் வலைப் பயன்பாடுகளின் செயல்திறனையும் நினைவகப் பயன்பாட்டையும் கணிசமாக மேம்படுத்தக்கூடிய ஒரு சக்திவாய்ந்த நுட்பமாகும். இந்த விரிவான வழிகாட்டி நிகழ்வு பிரதிநிதித்துவத்தின் கோட்பாடுகள், நன்மைகள், செயல்படுத்தல் மற்றும் சிறந்த நடைமுறைகளை ஆராய்கிறது.

நிகழ்வு பிரதிநிதித்துவத்தைப் புரிந்துகொள்ளுதல்

நிகழ்வு பிரதிநிதித்துவம் ஆவண பொருள் மாதிரியில் (DOM) உள்ள நிகழ்வு குமிழ்தல் (event bubbling) பொறிமுறையைப் பயன்படுத்துகிறது. ஒரு தனிமத்தில் (element) ஒரு நிகழ்வு ஏற்படும்போது, முதலில் அந்த குறிப்பிட்ட தனிமத்துடன் இணைக்கப்பட்ட நிகழ்வு கையாளிகளை (event handlers) தூண்டுகிறது. பின்னர், அந்த நிகழ்வு வெளிப்படையாக நிறுத்தப்படாவிட்டால் (event.stopPropagation() பயன்படுத்தி), அது DOM மரத்தில் மேலே "குமிழ்தலாக" பரவுகிறது, அதன் பெற்றோர் தனிமங்களில் உள்ள நிகழ்வு கையாளிகளைத் தூண்டுகிறது, இது ஆவணத்தின் மூலத்தை அடையும் வரை அல்லது ஒரு நிகழ்வு கையாளி பரவுவதை நிறுத்தும் வரை தொடர்கிறது.

தனிப்பட்ட குழந்தை தனிமங்களுக்கு நிகழ்வு கேட்பான்களை (event listeners) இணைப்பதற்குப் பதிலாக, நிகழ்வு பிரதிநிதித்துவம் ஒரு பெற்றோர் தனிமத்திற்கு ஒற்றை நிகழ்வு கேட்பானை இணைப்பதை உள்ளடக்கியது. இந்த கேட்பான் பின்னர் நிகழ்வின் இலக்கு பண்பை (event.target) ஆய்வு செய்கிறது, இது முதலில் நிகழ்வைத் தூண்டிய தனிமத்தைக் குறிக்கிறது. இலக்கை ஆய்வு செய்வதன் மூலம், அந்த நிகழ்வு ஒரு குறிப்பிட்ட ஆர்வமுள்ள குழந்தை தனிமத்திலிருந்து உருவானதா என்பதை கேட்பான் தீர்மானித்து பொருத்தமான செயலைச் செயல்படுத்த முடியும்.

பாரம்பரிய அணுகுமுறை: தனிப்பட்ட தனிமங்களுக்கு கேட்பான்களை இணைத்தல்

நிகழ்வு பிரதிநிதித்துவத்திற்குள் செல்வதற்கு முன், தனிப்பட்ட தனிமங்களுக்கு நேரடியாக நிகழ்வு கேட்பான்களை இணைக்கும் பாரம்பரிய அணுகுமுறையை ஆராய்வோம். உங்களிடம் ஒரு பொருட்களின் பட்டியல் இருப்பதாகக் கருதுங்கள், மேலும் ஒவ்வொரு பொருளின் மீதான கிளிக்குகளையும் நீங்கள் கையாள விரும்புகிறீர்கள்:

            
const listItems = document.querySelectorAll('li');

listItems.forEach(item => {
  item.addEventListener('click', function(event) {
    console.log('Item clicked:', event.target.textContent);
  });
});

            

              
                Copy
              
            
          

இந்த குறியீடு ஒவ்வொரு li தனிமத்தின் வழியாகவும் சென்று அதனுடன் ஒரு தனி நிகழ்வு கேட்பானை இணைக்கிறது. இந்த அணுகுமுறை வேலை செய்தாலும், குறிப்பாக அதிக எண்ணிக்கையிலான தனிமங்கள் அல்லது மாறும் வகையில் சேர்க்கப்பட்ட தனிமங்களைக் கையாளும் போது பல குறைபாடுகளைக் கொண்டுள்ளது.

நிகழ்வு பிரதிநிதித்துவ அணுகுமுறை: ஒரு திறமையான தீர்வு

நிகழ்வு பிரதிநிதித்துவத்துடன், நீங்கள் பெற்றோர் ul தனிமத்திற்கு ஒற்றை நிகழ்வு கேட்பானை இணைக்கிறீர்கள்:

            
const list = document.querySelector('ul');

list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Item clicked:', event.target.textContent);
  }
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், நிகழ்வு கேட்பான் ul தனிமத்துடன் இணைக்கப்பட்டுள்ளது. li தனிமங்களில் ஏதேனும் ஒன்றில் (அல்லது ul-க்குள் உள்ள வேறு எந்த தனிமத்திலும்) ஒரு கிளிக் நிகழ்வு ஏற்படும்போது, அந்த நிகழ்வு ul-க்கு மேலே குமிழ்தலாக பரவுகிறது. நிகழ்வு கேட்பான் பின்னர் event.target ஒரு LI தனிமமா என்பதைச் சரிபார்க்கிறது. அப்படியானால், குறியீடு விரும்பிய செயலைச் செய்கிறது.

நிகழ்வு பிரதிநிதித்துவத்தின் நன்மைகள்

தனிப்பட்ட தனிமங்களுக்கு நிகழ்வு கேட்பான்களை இணைக்கும் பாரம்பரிய அணுகுமுறையை விட நிகழ்வு பிரதிநிதித்துவம் பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

• மேம்பட்ட செயல்திறன்: DOM உடன் இணைக்கப்பட்ட நிகழ்வு கேட்பான்களின் எண்ணிக்கையைக் குறைக்கிறது, இது சிறந்த செயல்திறனுக்கு வழிவகுக்கிறது, குறிப்பாக அதிக எண்ணிக்கையிலான தனிமங்களைக் கையாளும் போது.
• குறைக்கப்பட்ட நினைவகப் பயன்பாடு: குறைவான நிகழ்வு கேட்பான்கள் என்றால் குறைவான நினைவகப் பயன்பாடு, இது ஒரு திறமையான பயன்பாட்டிற்கு பங்களிக்கிறது.
• எளிமைப்படுத்தப்பட்ட குறியீடு: நிகழ்வு கையாளுதல் தர்க்கத்தை மையப்படுத்துகிறது, குறியீட்டை சுத்தமாகவும் பராமரிக்க எளிதாகவும் ஆக்குகிறது.
• மாறும் வகையில் சேர்க்கப்பட்ட தனிமங்களைக் கையாளுகிறது: நிகழ்வு கேட்பான் இணைக்கப்பட்ட பிறகு DOM-ல் சேர்க்கப்படும் தனிமங்களுக்கு தானாகவே வேலை செய்கிறது, புதிய தனிமங்களுக்கு கேட்பான்களை இணைக்க கூடுதல் குறியீடு தேவையில்லை.

செயல்திறன் ஆதாயங்கள்: ஒரு அளவுசார் பார்வை

நிகழ்வு பிரதிநிதித்துவத்திலிருந்து செயல்திறன் ஆதாயங்கள் கணிசமானதாக இருக்கலாம், குறிப்பாக நூற்றுக்கணக்கான அல்லது ஆயிரக்கணக்கான தனிமங்களைக் கையாளும் போது. ஒவ்வொரு தனிப்பட்ட தனிமத்திற்கும் ஒரு நிகழ்வு கேட்பானை இணைப்பது நினைவகம் மற்றும் செயலாக்க சக்தியைப் பயன்படுத்துகிறது. உலாவி ஒவ்வொரு கேட்பானையும் கண்காணிக்க வேண்டும் மற்றும் அந்த தனிமத்தில் தொடர்புடைய நிகழ்வு ஏற்படும் போதெல்லாம் அதன் தொடர்புடைய கால்பேக் செயல்பாட்டை அழைக்க வேண்டும். இது குறிப்பாக பழைய சாதனங்களில் அல்லது வளம் குறைந்த சூழல்களில் ஒரு இடையூறாக மாறும்.

நிகழ்வு பிரதிநிதித்துவம் ஒரு பெற்றோர் தனிமத்திற்கு ஒற்றை கேட்பானை இணைப்பதன் மூலம் இந்த மேல்சுமையை வியத்தகு முறையில் குறைக்கிறது. குழந்தை தனிமங்களின் எண்ணிக்கையைப் பொருட்படுத்தாமல், உலாவி ஒரு கேட்பானை மட்டுமே நிர்வகிக்க வேண்டும். ஒரு நிகழ்வு ஏற்படும்போது, உலாவி ஒரே ஒரு கால்பேக் செயல்பாட்டை மட்டுமே அழைக்க வேண்டும், இது event.target-ஐ அடிப்படையாகக் கொண்டு பொருத்தமான செயலைத் தீர்மானிக்கிறது.

நினைவகத் திறன்: நினைவகப் பயன்பாட்டைக் குறைத்தல்

ஒவ்வொரு நிகழ்வு கேட்பானும் நினைவகத்தைப் பயன்படுத்துகிறது. நீங்கள் தனிப்பட்ட தனிமங்களுக்கு ஏராளமான கேட்பான்களை இணைக்கும்போது, உங்கள் பயன்பாட்டின் நினைவகப் பயன்பாடு கணிசமாக அதிகரிக்கக்கூடும். இது செயல்திறன் குறைபாட்டிற்கு வழிவகுக்கும், குறிப்பாக வரையறுக்கப்பட்ட நினைவகம் கொண்ட சாதனங்களில்.

நிகழ்வு பிரதிநிதித்துவம் நிகழ்வு கேட்பான்களின் எண்ணிக்கையைக் குறைப்பதன் மூலம் நினைவகப் பயன்பாட்டைக் குறைக்கிறது. இது குறிப்பாக ஒற்றை-பக்க பயன்பாடுகள் (SPAs) மற்றும் நினைவக மேலாண்மை முக்கியமான பிற சிக்கலான வலைப் பயன்பாடுகளில் நன்மை பயக்கும்.

நிகழ்வு பிரதிநிதித்துவத்தை செயல்படுத்துதல்: நடைமுறை எடுத்துக்காட்டுகள்

நிகழ்வு பிரதிநிதித்துவம் திறம்படப் பயன்படுத்தக்கூடிய பல்வேறு சூழ்நிலைகளை ஆராய்வோம்.

எடுத்துக்காட்டு 1: ஒரு மாறும் பட்டியலில் கிளிக்குகளை கையாளுதல்

நீங்கள் மாறும் வகையில் சேர்க்கக்கூடிய அல்லது அகற்றக்கூடிய பணிகளின் பட்டியல் இருப்பதாக கற்பனை செய்து கொள்ளுங்கள். நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தி, இந்தப் பணிகளின் மீதான கிளிக்குகளை, பக்கம் ஏற்றப்பட்ட பிறகு சேர்க்கப்பட்டாலும் கூட, எளிதாகக் கையாளலாம்.

            
<ul id="taskList">
  <li>Task 1</li>
  <li>Task 2</li>
  <li>Task 3</li>
</ul>
<button id="addTask">Add Task</button>

            

              
                Copy
              
            
          

            
const taskList = document.getElementById('taskList');
const addTaskButton = document.getElementById('addTask');

taskList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('completed');
  }
});

addTaskButton.addEventListener('click', function() {
  const newTask = document.createElement('li');
  newTask.textContent = 'New Task';
  taskList.appendChild(newTask);
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஒரு பணியின் மீது கிளிக் செய்வது 'completed' வகுப்பை மாற்றுகிறது. நிகழ்வு பிரதிநிதித்துவத்திற்கு நன்றி, ஒரு புதிய பணியைச் சேர்ப்பது ஏற்கனவே உள்ள நிகழ்வு கேட்பானுடன் தானாகவே வேலை செய்கிறது.

எடுத்துக்காட்டு 2: ஒரு அட்டவணையில் நிகழ்வுகளை கையாளுதல்

அட்டவணைகள் பெரும்பாலும் ஏராளமான வரிசைகள் மற்றும் செல்களைக் கொண்டிருக்கின்றன. ஒவ்வொரு செல்லுக்கும் நிகழ்வு கேட்பான்களை இணைப்பது திறனற்றதாக இருக்கும். நிகழ்வு பிரதிநிதித்துவம் ஒரு அளவிடக்கூடிய தீர்வை வழங்குகிறது.

            
<table id="dataTable">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td><td>USA</td></tr>
    <tr><td>Bob</td><td>25</td><td>Canada</td></tr>
    <tr><td>Charlie</td><td>35</td><td>UK</td></tr>
  </tbody>
</table>

            

              
                Copy
              
            
          

            
const dataTable = document.getElementById('dataTable');

dataTable.addEventListener('click', function(event) {
  if (event.target.tagName === 'TD') {
    console.log('Cell clicked:', event.target.textContent);
    // You can access the row using event.target.parentNode
    const row = event.target.parentNode;
    const name = row.cells[0].textContent;
    const age = row.cells[1].textContent;
    const country = row.cells[2].textContent;
    console.log(`Name: ${name}, Age: ${age}, Country: ${country}`);
  }
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஒரு செல்லின் மீது கிளிக் செய்வது அதன் உள்ளடக்கத்தையும் தொடர்புடைய வரிசைத் தரவையும் பதிவு செய்கிறது. ஒவ்வொரு TD தனிமத்திற்கும் தனிப்பட்ட கிளிக் கேட்பான்களை இணைப்பதை விட இந்த அணுகுமுறை மிகவும் திறமையானது.

எடுத்துக்காட்டு 3: ஒரு வழிசெலுத்தல் மெனுவை செயல்படுத்துதல்

வழிசெலுத்தல் மெனு உருப்படிகளின் மீதான கிளிக்குகளைத் திறமையாகக் கையாள நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தலாம்.

            
<nav>
  <ul id="mainNav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

            

              
                Copy
              
            
          

            
const mainNav = document.getElementById('mainNav');

mainNav.addEventListener('click', function(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault(); // Prevent default link behavior
    const href = event.target.getAttribute('href');
    console.log('Navigating to:', href);
    // Implement your navigation logic here
  }
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தி வழிசெலுத்தல் இணைப்புகளின் மீதான கிளிக்குகளை எவ்வாறு கையாள்வது என்பதைக் காட்டுகிறது. இது இயல்புநிலை இணைப்பு நடத்தையைத் தடுத்து இலக்கு URL-ஐ பதிவு செய்கிறது. பின்னர், ஒற்றை-பக்க பயன்பாட்டின் உள்ளடக்கத்தைப் புதுப்பித்தல் போன்ற உங்கள் தனிப்பயன் வழிசெலுத்தல் தர்க்கத்தை நீங்கள் செயல்படுத்தலாம்.

நிகழ்வு பிரதிநிதித்துவத்திற்கான சிறந்த நடைமுறைகள்

நிகழ்வு பிரதிநிதித்துவத்தின் நன்மைகளை அதிகரிக்க, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• குறிப்பிட்ட தனிமங்களை இலக்கு வையுங்கள்: உங்கள் நிகழ்வு கேட்பான் நீங்கள் கையாள விரும்பும் குறிப்பிட்ட தனிமங்களை அடையாளம் காண event.target பண்பைச் சரிபார்க்கிறது என்பதை உறுதிப்படுத்தவும். பெற்றோர் கொள்கலனுக்குள் உள்ள மற்ற தனிமங்களிலிருந்து உருவாகும் நிகழ்வுகளுக்கு தேவையற்ற குறியீட்டைச் செயல்படுத்துவதைத் தவிர்க்கவும்.
• CSS வகுப்புகள் அல்லது தரவுப் பண்புகளைப் பயன்படுத்தவும்: ஆர்வமுள்ள தனிமங்களை அடையாளம் காண CSS வகுப்புகள் அல்லது தரவுப் பண்புகளைப் பயன்படுத்தவும். இது உங்கள் குறியீட்டை மேலும் படிக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் மாற்றும். எடுத்துக்காட்டாக, நீங்கள் கையாள விரும்பும் தனிமங்களுக்கு 'clickable-item' என்ற வகுப்பைச் சேர்த்து, பின்னர் உங்கள் நிகழ்வு கேட்பானில் அந்த வகுப்பைச் சரிபார்க்கலாம்.
• மிகவும் பரந்த நிகழ்வு கேட்பான்களைத் தவிர்க்கவும்: உங்கள் நிகழ்வு கேட்பானை எங்கு இணைக்கிறீர்கள் என்பதில் கவனமாக இருங்கள். அதை document அல்லது body-க்கு இணைப்பது, அதிக எண்ணிக்கையிலான நிகழ்வுகளுக்கு நிகழ்வு கையாளி தேவையற்ற முறையில் செயல்படுத்தப்பட்டால், செயல்திறனைக் குறைக்கும். நீங்கள் கையாள விரும்பும் அனைத்து தனிமங்களையும் கொண்ட மிக நெருக்கமான பெற்றோர் தனிமத்தைத் தேர்வு செய்யவும்.
• நிகழ்வு பரவலைக் கருத்தில் கொள்ளுங்கள்: நிகழ்வு குமிழ்தல் எவ்வாறு செயல்படுகிறது மற்றும் event.stopPropagation() பயன்படுத்தி நிகழ்வு பரவலை நீங்கள் நிறுத்த வேண்டுமா என்பதைப் புரிந்து கொள்ளுங்கள். சில சந்தர்ப்பங்களில், தேவையற்ற பக்க விளைவுகளைத் தவிர்க்க ஒரு நிகழ்வு பெற்றோர் தனிமங்களுக்கு மேலே குமிழ்தலாக பரவுவதைத் தடுக்க நீங்கள் விரும்பலாம்.
• நிகழ்வு கேட்பான் தர்க்கத்தை மேம்படுத்துங்கள்: உங்கள் நிகழ்வு கேட்பான் தர்க்கத்தை சுருக்கமாகவும் திறமையாகவும் வைத்திருங்கள். நிகழ்வு கையாளியில் சிக்கலான அல்லது நேரத்தை எடுத்துக்கொள்ளும் செயல்பாடுகளைச் செய்வதைத் தவிர்க்கவும், ஏனெனில் இது செயல்திறனைப் பாதிக்கும். தேவைப்பட்டால், சிக்கலான செயல்பாடுகளை ஒரு தனி செயல்பாட்டிற்கு ஒத்திவைக்கவும் அல்லது செயல்படுத்தும் அதிர்வெண்ணைக் கட்டுப்படுத்த டிபவுன்சிங் அல்லது த்ராட்லிங் போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• முழுமையாக சோதிக்கவும்: உங்கள் நிகழ்வு பிரதிநிதித்துவச் செயலாக்கம் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த, வெவ்வேறு உலாவிகளிலும் சாதனங்களிலும் முழுமையாகச் சோதிக்கவும். செயல்திறன் மற்றும் நினைவகப் பயன்பாட்டில் கவனம் செலுத்துங்கள், குறிப்பாக அதிக எண்ணிக்கையிலான தனிமங்கள் அல்லது சிக்கலான நிகழ்வு கையாளுதல் தர்க்கத்துடன் கையாளும் போது.

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

மேம்படுத்தப்பட்ட நிகழ்வு கையாளுதலுக்காக தரவுப் பண்புகளைப் பயன்படுத்துதல்

தரவுப் பண்புகள் HTML தனிமங்களில் தனிப்பயன் தரவைச் சேமிக்க ஒரு நெகிழ்வான வழியை வழங்குகின்றன. உங்கள் நிகழ்வு கையாளிகளுக்கு கூடுதல் தகவல்களை அனுப்ப, நிகழ்வு பிரதிநிதித்துவத்துடன் இணைந்து தரவுப் பண்புகளைப் பயன்படுத்தலாம்.

            
<ul id="productList">
  <li data-product-id="123" data-product-name="Laptop">Laptop</li>
  <li data-product-id="456" data-product-name="Mouse">Mouse</li>
  <li data-product-id="789" data-product-name="Keyboard">Keyboard</li>
</ul>

            

              
                Copy
              
            
          

            
const productList = document.getElementById('productList');

productList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const productId = event.target.dataset.productId;
    const productName = event.target.dataset.productName;
    console.log(`Product clicked: ID=${productId}, Name=${productName}`);
    // You can now use productId and productName to perform other actions
  }
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஒவ்வொரு li தனிமமும் data-product-id மற்றும் data-product-name பண்புகளைக் கொண்டுள்ளது. நிகழ்வு கேட்பான் event.target.dataset-ஐப் பயன்படுத்தி இந்த மதிப்புகளைப் பெறுகிறது, இது நிகழ்வு கையாளியில் தயாரிப்பு-குறிப்பிட்ட தகவல்களை அணுக உங்களை அனுமதிக்கிறது.

வெவ்வேறு நிகழ்வு வகைகளைக் கையாளுதல்

நிகழ்வு பிரதிநிதித்துவம் கிளிக் நிகழ்வுகளுக்கு மட்டும் அல்ல. இது மவுஸ்ஓவர், மவுஸ்அவுட், கீஅப், கீடவுன் மற்றும் பல போன்ற பல்வேறு நிகழ்வு வகைகளைக் கையாளப் பயன்படுத்தப்படலாம். பெற்றோர் தனிமத்திற்கு பொருத்தமான நிகழ்வு கேட்பானை இணைத்து, நிகழ்வு கையாளுதல் தர்க்கத்தை அதற்கேற்ப சரிசெய்யவும்.

நிழல் DOM-ஐ கையாளுதல்

நீங்கள் நிழல் DOM (Shadow DOM) உடன் பணிபுரிகிறீர்கள் என்றால், நிகழ்வு பிரதிநிதித்துவம் மிகவும் சிக்கலானதாக மாறும். இயல்பாக, நிகழ்வுகள் நிழல் எல்லைகள் வழியாக மேலே குமிழ்தலாக பரவுவதில்லை. ஒரு நிழல் DOM-க்குள் இருந்து நிகழ்வுகளைக் கையாள, நிழல் DOM-ஐ உருவாக்கும்போது composed: true விருப்பத்தைப் பயன்படுத்த வேண்டியிருக்கலாம்:

            
const shadowHost = document.getElementById('shadowHost');
const shadowRoot = shadowHost.attachShadow({ mode: 'open', composed: true });

            

              
                Copy
              
            
          

இது நிழல் DOM-க்குள் இருந்து வரும் நிகழ்வுகளை பிரதான DOM-க்கு மேலே குமிழ்தலாக பரவ அனுமதிக்கிறது, அங்கு அவை ஒரு பிரதிநிதித்துவப்படுத்தப்பட்ட நிகழ்வு கேட்பானால் கையாளப்படலாம்.

நிஜ-உலகப் பயன்பாடுகள் மற்றும் எடுத்துக்காட்டுகள்

ரியாக்ட், ஆங்குலர் மற்றும் வ்யூ.js போன்ற பல்வேறு வலை மேம்பாட்டு கட்டமைப்புகள் மற்றும் நூலகங்களில் நிகழ்வு பிரதிநிதித்துவம் பரவலாகப் பயன்படுத்தப்படுகிறது. இந்த கட்டமைப்புகள் பெரும்பாலும் நிகழ்வு கையாளுதலை மேம்படுத்தவும் செயல்திறனை அதிகரிக்கவும் உள்நாட்டில் நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்துகின்றன.

ஒற்றை-பக்க பயன்பாடுகள் (SPAs)

SPAs பெரும்பாலும் DOM-ஐ மாறும் வகையில் புதுப்பிப்பதை உள்ளடக்கியது. SPAs-ல் நிகழ்வு பிரதிநிதித்துவம் குறிப்பாக மதிப்புமிக்கது, ஏனெனில் இது ஆரம்பப் பக்கம் ஏற்றப்பட்ட பிறகு DOM-ல் சேர்க்கப்படும் தனிமங்களின் மீதான நிகழ்வுகளைக் கையாள உங்களை அனுமதிக்கிறது. எடுத்துக்காட்டாக, ஒரு API-லிருந்து பெறப்பட்ட தயாரிப்புகளின் பட்டியலைக் காட்டும் ஒரு SPA-ல், தயாரிப்புப் பட்டியல் ஒவ்வொரு முறையும் புதுப்பிக்கப்படும்போது நிகழ்வு கேட்பான்களை மீண்டும் இணைக்க வேண்டிய அவசியமின்றி, தயாரிப்பு உருப்படிகளின் மீதான கிளிக்குகளைக் கையாள நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தலாம்.

ஊடாடும் அட்டவணைகள் மற்றும் கட்டங்கள்

ஊடாடும் அட்டவணைகள் மற்றும் கட்டங்கள் பெரும்பாலும் தனிப்பட்ட செல்கள் அல்லது வரிசைகளில் நிகழ்வுகளைக் கையாள வேண்டும். நிகழ்வு பிரதிநிதித்துவம் இந்த நிகழ்வுகளைக் கையாள ஒரு திறமையான வழியை வழங்குகிறது, குறிப்பாக பெரிய தரவுத்தொகுப்புகளுடன் கையாளும் போது. எடுத்துக்காட்டாக, ஒரு அட்டவணை அல்லது கட்டத்தில் தரவை வரிசைப்படுத்துதல், வடிகட்டுதல் மற்றும் திருத்துதல் போன்ற அம்சங்களைச் செயல்படுத்த நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தலாம்.

மாறும் படிவங்கள்

மாறும் படிவங்கள் பெரும்பாலும் பயனர் தொடர்புகளின் அடிப்படையில் படிவ புலங்களைச் சேர்ப்பது அல்லது அகற்றுவதை உள்ளடக்கியது. ஒவ்வொரு புலத்திற்கும் கைமுறையாக நிகழ்வு கேட்பான்களை இணைக்க வேண்டிய அவசியமின்றி, இந்தப் படிவ புலங்களில் நிகழ்வுகளைக் கையாள நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக, ஒரு மாறும் படிவத்தில் சரிபார்ப்பு, தானியங்கு-நிரப்புதல் மற்றும் நிபந்தனை தர்க்கம் போன்ற அம்சங்களைச் செயல்படுத்த நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தலாம்.

நிகழ்வு பிரதிநிதித்துவத்திற்கான மாற்று வழிகள்

நிகழ்வு பிரதிநிதித்துவம் ஒரு சக்திவாய்ந்த நுட்பமாக இருந்தாலும், ஒவ்வொரு சூழ்நிலைக்கும் இது எப்போதும் சிறந்த தீர்வு அல்ல. பிற அணுகுமுறைகள் மிகவும் பொருத்தமானதாக இருக்கும் சூழ்நிலைகள் உள்ளன.

நேரடி நிகழ்வு பிணைப்பு

உங்களிடம் ஒரு சிறிய, நிலையான எண்ணிக்கையிலான தனிமங்கள் இருக்கும் மற்றும் நிகழ்வு கையாளுதல் தர்க்கம் ஒப்பீட்டளவில் எளிமையானதாக இருக்கும் சந்தர்ப்பங்களில், நேரடி நிகழ்வு பிணைப்பு போதுமானதாக இருக்கலாம். நேரடி நிகழ்வு பிணைப்பு என்பது addEventListener()-ஐப் பயன்படுத்தி ஒவ்வொரு தனிமத்திற்கும் நேரடியாக நிகழ்வு கேட்பான்களை இணைப்பதை உள்ளடக்கியது.

கட்டமைப்பு-குறிப்பிட்ட நிகழ்வு கையாளுதல்

ரியாக்ட், ஆங்குலர் மற்றும் வ்யூ.js போன்ற நவீன வலை மேம்பாட்டு கட்டமைப்புகள் அவற்றின் சொந்த நிகழ்வு கையாளுதல் வழிமுறைகளை வழங்குகின்றன. இந்த வழிமுறைகள் பெரும்பாலும் நிகழ்வு பிரதிநிதித்துவத்தை உள்நாட்டில் இணைக்கின்றன அல்லது கட்டமைப்பின் கட்டடக்கலைக்கு உகந்ததாக இருக்கும் மாற்று அணுகுமுறைகளை வழங்குகின்றன. நீங்கள் இந்தக் கட்டமைப்புகளில் ஒன்றைப் பயன்படுத்துகிறீர்கள் என்றால், உங்கள் சொந்த நிகழ்வு பிரதிநிதித்துவ தர்க்கத்தைச் செயல்படுத்துவதை விட, கட்டமைப்பின் உள்ளமைக்கப்பட்ட நிகழ்வு கையாளுதல் திறன்களைப் பயன்படுத்த பொதுவாகப் பரிந்துரைக்கப்படுகிறது.

முடிவுரை

ஜாவாஸ்கிரிப்ட் நிகழ்வு பிரதிநிதித்துவம் என்பது வலைப் பயன்பாடுகளில் செயல்திறன் மற்றும் நினைவகத் திறனை மேம்படுத்துவதற்கான ஒரு மதிப்புமிக்க நுட்பமாகும். ஒரு பெற்றோர் தனிமத்திற்கு ஒற்றை நிகழ்வு கேட்பானை இணைத்து, நிகழ்வு குமிழ்தலைப் பயன்படுத்துவதன் மூலம், நீங்கள் நிகழ்வு கேட்பான்களின் எண்ணிக்கையை கணிசமாகக் குறைத்து உங்கள் குறியீட்டை எளிதாக்கலாம். இந்தக் வழிகாட்டி நிகழ்வு பிரதிநிதித்துவத்தின் ஒரு விரிவான கண்ணோட்டத்தை வழங்கியுள்ளது, அதன் கோட்பாடுகள், நன்மைகள், செயல்படுத்தல், சிறந்த நடைமுறைகள் மற்றும் நிஜ உலக எடுத்துக்காட்டுகள் உட்பட. இந்தக் கருத்துகளைப் பயன்படுத்துவதன் மூலம், உலகளாவிய பார்வையாளர்களுக்கு சிறந்த பயனர் அனுபவத்தை வழங்கும், அதிக செயல்திறன் மிக்க, திறமையான மற்றும் பராமரிக்கக்கூடிய வலைப் பயன்பாடுகளை நீங்கள் உருவாக்கலாம். உங்கள் திட்டங்களின் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப இந்த நுட்பங்களை மாற்றியமைக்கவும், எப்போதும் புரிந்துகொள்ளவும் பராமரிக்கவும் எளிதான சுத்தமான, நன்கு கட்டமைக்கப்பட்ட குறியீட்டை எழுதுவதற்கு முன்னுரிமை அளிக்கவும் நினைவில் கொள்ளுங்கள்.