அத்தியாயம் 17

நிகழ்வுகள் (Events)

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

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

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

<p>ஹேண்ட்லரைச் செயல்படுத்த என்னைக் கிளிக் செய்யவும்.</p>
<script>
  window.addEventListener("click", () => {
    console.log("கிளிக் செய்யப்பட்டது");
  });
</script>

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

சில பொதுவான HTML நிகழ்வுகள் இங்கே குறிப்பிடப்பட்டுள்ளன.

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

நிகழ்வுப் பொருளின் (event object) மீது நிகழ்வு ஹேண்ட்லர் stopPropagation முறையை அழைக்கலாம், இது மேலேயுள்ள ஹேண்ட்லர்கள் நிகழ்வைப் பெறுவதைத் தடுக்கும். கிளிக் செய்யக்கூடிய உறுப்புக்குள் (clickable element) உங்களிடம் ஒரு பொத்தான் இருந்தால், ஒரு பொத்தான் கிளிக்கிலிருந்து வெளிப்புற உறுப்பின் கிளிக் செய்யக்கூடிய நடத்தைத் தூண்டுவதற்கு நீங்கள் விரும்பாத சந்தர்ப்பங்களில் இது பயனுள்ளதாக இருக்கும்.

<p>ஒரு <button>பொத்தான்</button> கொண்ட ஒரு பத்தி.</p>
<script>
  let para = document.querySelector("p"),
      button = document.querySelector("button");
  para.addEventListener("mousedown", () => {
    console.log("பத்தி ஹேண்ட்லர்.");
  });
  button.addEventListener("mousedown", event => {
    console.log("பொத்தான் ஹேண்ட்லர்.");
    event.stopPropagation();
  });
</script>

இங்கே, mousedown ஹேண்ட்லர்கள் பத்தி மற்றும் பொத்தான் இரண்டாலும் பதிவு செய்யப்பட்டுள்ளன. பொத்தானைக் கிளிக் செய்தவுடன், பொத்தானின் ஹேண்ட்லர் stopPropagation ஐ அழைக்கிறது, இது பத்தியில் உள்ள ஹேண்ட்லர் இயங்குவதைத் தடுக்கும்.

நிகழ்வுகள் ஒரு இயல்புநிலை நடத்தையைக் (default behavior) கொண்டிருக்கலாம். எடுத்துக்காட்டாக, இணைப்புகள் (links) கிளிக் செய்தவுடன் இணைப்பின் இலக்குக்குச் செல்லும், கீழ் அம்புக்குறியைக் கிளிக் செய்தவுடன் ஒரு பக்கத்தின் கீழ்ப் பகுதிக்குச் செல்லப்படுவீர்கள், மற்றும் பல. நிகழ்வுப் பொருளின் மீது preventDefault முறையை அழைப்பதன் மூலம் இந்த இயல்புநிலை நடத்தைகளைத் தடுக்கலாம்.

<a href="https://developer.mozilla.org/">MDN</a>
<script>
  let link = document.querySelector("a");
  link.addEventListener("click", event => {
    console.log("இல்லை.");
    event.preventDefault();
  });
</script>

இங்கே, கிளிக் செய்தவுடன் இணைப்பின் இயல்புநிலை நடத்தை தடுக்கப்படுகிறது, அதாவது இணைப்பின் இலக்கை நோக்கிச் செல்வது.