நிகழ்வுகளைக் கேட்பது (Listening for Events)

ஒரு பக்கத்தை ஊடாடக்கூடியதாக (interactive) மாற்ற (அதாவது, பயனர் செயல்களுக்குப் பதிலளிக்கும் வகையில் மாறக்கூடியது), நீங்கள் பயனர் நிகழ்வுகளுக்கு (user events) பதிலளிக்க வேண்டும். ஒரு பயனர் கணினியுடன் தொடர்பு கொள்ளும்போதெல்லாம், அந்தத் தொடர்புகளை ஒரு நிகழ்வாக (event) இயக்க முறைமை (operating system) அறிவிக்கிறது: பொத்தானைக் கிளிக் செய்யும் நிகழ்வு, மவுஸ் நகர்த்தப்படும் நிகழ்வு, விசைப்பலகை விசை அழுத்தப்படும் நிகழ்வு போன்றவை. இந்த நிகழ்வுகள் முழு கணினிக்கும் ஒளிபரப்பப்படுகின்றன (broadcast), இது எந்தவொரு பயன்பாட்டையும் (உலாவி உட்பட) ஒரு குறிப்பிட்ட ஜாவாஸ்கிரிப்ட் செயல்பாட்டைச் செயல்படுத்துவது போன்ற நிகழ்வின் நிகழ்வுக்கு "பதிலளிக்க" அனுமதிக்கிறது.

எனவே பயனர் செயல்களுக்கு (மற்றும் அந்த செயல்கள் உருவாக்கும் நிகழ்வுகளுக்கு) பதிலளிக்க, நிகழ்வு நடக்கும் போது செயல்படுத்தப்படும் ஒரு செயல்பாட்டை நாம் வரையறுக்க வேண்டும். நீங்கள் சாதாரணமாக ஒரு செயல்பாட்டை வரையறுப்பீர்கள், ஆனால் அந்த செயல்பாடு உங்கள் ஸ்கிரிப்டில் ஒரு குறிப்பிட்ட படியாக உங்களால் அழைக்கப்படாது. அதற்குப் பதிலாக, நீங்கள் குறிப்பிடும் செயல்பாடு, எதிர்காலத்தில் ஏதோ ஒரு உறுதியற்ற நேரத்தில் ஒரு நிகழ்வு நிகழும்போது கணினியால் செயல்படுத்தப்படும். இந்த செயல்முறை நிகழ்வு உந்துதல் நிரலாக்கம் (event-driven programming) என அழைக்கப்படுகிறது. இது ஒத்திசைவற்ற நிரலாக்கத்திற்கும் (asynchronous programming) ஒரு எடுத்துக்காட்டு: இதில் அறிக்கைகள் ஒன்றன்பின் ஒன்றாக ("ஒத்திசைவாக") செயல்படுத்தப்படுவதில்லை, ஆனால் "வரிசை மாறி" அல்லது ஒரே நேரத்தில் கூட நிகழலாம்! (ஒத்திசைவற்ற நிரலாக்கத்துடன் பணிபுரிவது பற்றி மேலும் அறிய, அத்தியாயம் 14 ஐக் காண்க).

உங்கள் ஸ்கிரிப்ட் பயனர் நிகழ்வுகளுக்குப் பதிலளிக்க, நீங்கள் ஒரு நிகழ்வு கேட்பவரைப் பதிவு செய்ய வேண்டும் (register an event listener). இது சமூக ஊடகங்களில் ஒருவரைப் பின்தொடர்வது போன்றது: அந்த நபரின் புதுப்பிப்புகளை நீங்கள் "கேட்க (listen)" விரும்புகிறீர்கள் என்பதையும், அந்த நபரிடமிருந்து சில செய்திகளை "கேட்கும்போது (hear)" நீங்கள் என்ன செய்ய விரும்புகிறீர்கள் என்பதையும் குறிப்பிடுகிறீர்கள்.

• உங்கள் பெயர் குறிப்பிடப்படும்போது ஸ்லாக் (Slack) உங்களுக்குத் தெரிவிக்க வேண்டும் என்று நீங்கள் குறிப்பிடுவது மற்றொரு நல்ல ஒப்புமை!

DOM API ஆனது தேர்ந்தெடுக்கப்பட்ட உறுப்பில் (எ.கா., நீங்கள் கேட்க விரும்பும் உறுப்பில்) .addEventListener() ஐ அழைப்பதன் மூலம் ஒரு நிகழ்வு கேட்பவரைப் பதிவு செய்ய உங்களை அனுமதிக்கிறது. இந்த முறை இரண்டு வாதங்களை (arguments) எடுத்துக்கொள்கிறது: நீங்கள் எந்த வகையான நிகழ்வைக் கேட்க விரும்புகிறீர்கள் என்பதைக் குறிக்கும் சரம் (string), மற்றும் அந்த நிகழ்வை நீங்கள் கேட்கும்போது செயல்படுத்துவதற்கான பின்கூப்பிடல் செயல்பாடு (callback function):

// பெயரிடப்பட்ட (named) பின்கூப்பிடல் செயல்பாடு
function onClickCallback() {
  console.log("என்னை கிளிக் செய்தீர்கள்!");
}

// நாம் "கேட்க" விரும்பும் உறுப்பிற்கான குறிப்பைப் பெறவும்
let button = document.querySelector("button");

// 'click' நிகழ்வுகளுக்கு கேட்பவரைப் பதிவு செய்யவும்
button.addEventListener("click", onClickCallback);

• பயனர் பொத்தானைக் கிளிக் செய்யும் போது, அது ஒரு 'click' நிகழ்வை ( "நான் கிளிக் செய்யப்பட்டேன்! நான் கிளிக் செய்யப்பட்டேன்!") "கத்தும்". அத்தகைய நிகழ்வுக்காக நீங்கள் கேட்பவரை (எச்சரிக்கை/அறிவிப்பு) அமைத்துள்ளதால், உங்கள் ஸ்கிரிப்ட் ஏதாவது செய்ய முடியும் - மற்றும் அது என்ன செய்யும் என்றால் குறிப்பிடப்பட்ட பின்கூப்பிடல் செயல்பாட்டை (callback function) இயக்கும்.

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

• ஒரு அநாமதேய செயல்பாட்டை (anonymous function) பின்கூப்பிடலாகப் பயன்படுத்துவது மிகவும் பொதுவானது:

  let button = document.querySelect.select("button");
  button.addEventListener("click", function () {
    console.log("என்னை கிளிக் செய்தீர்கள்!");
  });
  

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

நிகழ்வு பின்கூப்பீடு ஒற்றை வாதமாக (single argument) அனுப்பப்படும்: நிகழ்ந்த "நிகழ்வைக்" குறிக்கும் ஒரு பொருள். (ஜாவாஸ்கிரிப்டில் அனைத்து அளவுருக்களும் விருப்பமானவை என்பதால், அது மேலே உள்ள எடுத்துக்காட்டில் பயன்படுத்தப்படவில்லை, அது பின்கூப்பீடு வரையறையில் சேர்க்கப்படவில்லை). நிகழ்வு எங்கு நிகழ்ந்தது (x,y ஆயங்களில்), எந்த DOM உறுப்பு நிகழ்வை ஏற்படுத்தியது மற்றும் பல தகவல்கள் இந்த நிகழ்வில் அடங்கும்:

elem.addEventListener("click", function (event) {
  // யார் கிளிக் செய்யப்பட்டார்கள் என்பதைப் பெறுங்கள்;
  let clickedElem = event.target; // நிகழ்வின் target பண்பு
  console.log(clickedElem);
});

சில நேரங்களில் ஒரு நிகழ்வின் "வழக்கமான" முடிவுகள் நிகழ்வதைத் தடுக்க நீங்கள் விரும்பலாம் என்பதையும் நினைவில் கொள்க. எடுத்துக்காட்டாக, ஒரு பொத்தான் அதன் வழக்கமான பொத்தான் செயலை (படிவத்தைச் சமர்ப்பிப்பது (submitting a form) போன்றவற்றை) செய்வதை நீங்கள் விரும்பாமல் இருக்கலாம், அதற்குப் பதிலாக உங்கள் சொந்த தனிப்பயன் நடத்தையை (custom behavior) வழங்க விரும்பலாம். இதை ஆதரிக்க, நிகழ்வில் பின்வரும் முறைகளை அழைப்பதன் மூலம் நீங்கள் "நிகழ்வை குறுக்கிடலாம் (interrupt the event)":

submitBtn.addEventListener("click", function (event) {
  event.preventDefault(); // வழக்கமான நடத்தையை செய்ய வேண்டாம்
  event.stopPropagation(); // பெற்றோர்களுக்கு நிகழ்வை அனுப்ப வேண்டாம்

  //..தனிப்பயன் நடத்தை இங்கே செய்யுங்கள்

  return false; // வழக்கமான நடத்தை அல்லது பரப்புதல் இரண்டையும் செய்ய வேண்டாம்! (IE க்காக)
});

நிகழ்வுகளின் வகைகள் (Types of Events)

நீங்கள் கேட்கக்கூடிய பல்வேறு நிகழ்வுகள் உள்ளன, அவற்றுள்:

• 'click' போன்ற மவுஸ் நிகழ்வுகள் (Mouse Events). event.offsetX மற்றும் event.offsetY கிளிக் இருப்பிடத்திற்கான (x,y) ஆயங்களை இலக்கு உறுப்புடன் (target element) தொடர்புடையதாக வழங்கும்; உலாவி சாளரத்துடன் (browser window) தொடர்புடைய ஆயங்களுக்கு நீங்கள் clientX/Y ஐப் பயன்படுத்தலாம், அல்லது ஆவணத்துடன் தொடர்புடைய ஆயங்களுக்கு (உருட்டுதலைப் பொருட்படுத்தாமல்) pageX/Y ஐப் பயன்படுத்தலாம். விவரங்களுக்கு இந்த இடுகையைப் பார்க்கவும், மற்றும் ஒரு உதாரணத்திற்கு இந்தப் பக்கத்தைப் பார்க்கவும்.

  பிற மவுஸ் நிகழ்வுகளில் 'dblclick' (இரட்டை கிளிக்), 'mousedown' (மவுஸ் பொத்தான் கீழே அழுத்தப்பட்டுள்ளது, வைத்திருக்கப்படலாம்), 'hover' (மவுஸ் மேலோட்டமாக உள்ளது), 'mouseenter' (மவுஸ் உறுப்பின் மீது நகர்கிறது), 'mousemove' (மவுஸ் உறுப்பின் மீது நகர்கிறது), மற்றும் 'mouseleave' (மவுஸ் உறுப்பை விட்டு நகர்கிறது) ஆகியவை அடங்கும்.

• 'keydown' போன்ற விசைப்பலகை நிகழ்வுகள் (Keyboard Events). event.key பண்பு எந்த விசை அழுத்தப்பட்டது என்பதைத் தீர்மானிக்கப் பயன்படுகிறது, இது நீங்கள் சரிபார்க்கக்கூடிய ஒரு முன்பே வரையறுக்கப்பட்ட முக்கிய மதிப்பைத் தருகிறது:

  elem.addEventListener("keydown", function (event) {
    if (event.key === "ArrowUp") {
      console.log("மேலே செல்கிறது!");
    }
    //...
  });
  

  நிகழ்வு நிகழும்போது ஷிப்ட் (shift), கண்ட்ரோல் (control) அல்லது மெட்டா (Windows/command) போன்ற ஏதேனும் "மாற்றி விசைகள் (modifier keys)" அழுத்தப்பட்டுள்ளதா என்பதைச் சரிபார்க்கும் பண்புகளையும் event பொருள் கொண்டுள்ளது.

  நீங்கள் பெரும்பாலும் 'keydown' மற்றும் 'keyup' நிகழ்வுகளுக்குப் பதிலளிக்க விரும்புகிறீர்கள் என்பதை நினைவில் கொள்க; 'keypressed' நிகழ்வு பின்னர் அனுப்பப்படும் மற்றும் இது மாற்றி விசைகளுக்கு (modifier keys) மட்டும் பொருந்தாது.

• சாளர நிகழ்வுகள் (Window Events) என்பவை window global ஆல் உருவாக்கப்பட்ட நிகழ்வாகும், இதற்கும் நாம் நிகழ்வு கேட்பவர்களைப் பதிவு செய்ய முடியும்! எடுத்துக்காட்டாக, சாளரத்தின் அளவு எப்போது மாறியது என்பதை அடையாளம் காண 'resize' நிகழ்வைப் பயன்படுத்தலாம் (எ.கா., உள்ளடக்கத்தை CSS ஆக மாற்றுவதற்கு நீங்கள் விரும்பினால்):

  window.addEventListener("resize", function () {
    //...
  });
  

  கூடுதலாக, வலைப்பக்கம் ஏற்றப்படுவதை முடித்தவுடன் நிகழும் ஒரு சிறப்பு நிகழ்வு பின்கூப்பிடலை window global வரையறுக்கிறது. வலைப்பக்கம் ஏற்றிய பிறகு (எ.கா., <head> இல் குறிப்பிடப்பட்டுள்ள ஸ்கிரிப்டுகளுக்கு) மட்டுமே குறியீட்டை இயக்க இந்தப் பின்கூப்பிடலுக்கு உங்கள் சொந்த செயல்பாட்டை ஒதுக்கலாம்:

  window.onload = function () {
    //...பக்கம் தயாரானவுடன் விஷயங்களைச் செய்யுங்கள் (எ.கா., உங்கள் குறியீட்டின் மீதமுள்ளவற்றை இயக்கவும்)
  };
  

`onclick` போன்ற பண்புக்கூறுகளைப் பயன்படுத்தி உங்கள் HTML இல் ஜாவாஸ்கிரிப்டைக் கலக்க வேண்டாம். உங்கள் குறியீட்டை ஒழுங்கமைத்து வைக்கவும், கவலைகளின் தூய்மையான பிரிப்பை (clean separation of concerns) உறுதிப்படுத்தவும் எப்போதும் ஒரு தனி ஜாவாஸ்கிரிப்ட் கோப்பில் நிகழ்வு கேட்பவர்களைப் பதிவு செய்யவும்.

நிகழ்வு உந்துதல் நிரலாக்கம் (Event-Driven Programming)

வழக்கமான இணைய நிரலில் நிகழ்வு பின்கூப்பீடு செயல்பாடுகள் மீண்டும் மீண்டும் நிகழலாம் (எ.கா., ஒவ்வொரு முறையும் பயனர் பொத்தானைக் கிளிக் செய்யும் போது). இது ஒரு while சுழற்சியின் உடல் (body) போல செயல்பட வைக்கிறது. இருப்பினும், இந்த பின்கூப்பிடல்கள் செயல்பாடுகள் (functions) என்பதால், அவற்றுக்குள் வரையறுக்கப்பட்ட எந்த மாறிகளும் அந்த செயல்பாட்டிற்கு ஸ்கோப் (scoped) செய்யப்படும், மேலும் அடுத்தடுத்த செயலாக்கங்களில் கிடைக்காது. எனவே நீங்கள் சில கூடுதல் தகவல்களைக் கண்காணிக்க விரும்பினால் (எ.கா., பொத்தான் எத்தனை முறை கிளிக் செய்யப்பட்டது), செயல்பாட்டிற்கு வெளியே (எ.கா., ஒரு global இல்) அறிவிக்கப்பட்ட மாறியைப் பயன்படுத்த வேண்டும். நிரலின் நிலையை (state) (சூழ்நிலை) குறிக்க இத்தகைய மாறிகளைப் பயன்படுத்தலாம், பின்னர் கீழேயுள்ள வடிவத்தைப் பின்பற்றி ஒரு நிகழ்வு ஏற்படும் போது என்ன நடத்தைச் செய்ய வேண்டும் என்பதைத் தீர்மானிக்க அதைப் பயன்படுத்தலாம்:

//போலிக்குறியீடு (pseudocode)
ஒரு நிகழ்வு நிகழும்போது {
   நிரலின் நிலையை (STATE) சரிபார்க்கவும்;
   அந்த நிலையின் அடிப்படையில் என்ன செய்வது என்று முடிவு (DECIDE) செய்யவும்;
   அடுத்த நிகழ்வுக்குத் தேவையான நிலையைப் புதுப்பிக்கவும் (UPDATE);
}

எடுத்துக்காட்டாக:

let clickCount = 0; //"நிலையை (state)" கண்காணிக்கவும் (global)
document.querySelector("button").addEventListener("click", function () {
  if (clickCount > 10) {
    //என்ன செய்வது என்று முடிவு செய்யுங்கள்
    console.log("இது போதும் என்று நினைக்கிறேன்");
  } else {
    clickCount++; //நிலையை மாற்றவும் (+1)
    console.log("என்னை கிளிக் செய்தீர்கள்!");
  }
});

• இந்த "நிலை (state)" மாறிகள் global ஆக இருக்கலாம் அல்லது closure ஆகக் கொண்டிருக்கும் ஒரு செயல்பாட்டிற்குள் எளிதாக அறிவிக்கப்படலாம். நிலை மாறிகள் பெரும்பாலும் பொருள்களாகும் (objects), தனிப்பட்ட மதிப்புகள் பண்புகளாகச் சேமிக்கப்படும். இது பெயர் இடைவெளி (name-spacing) அம்சத்தை வழங்குகிறது, மேலும் பல மாறிகளால் குறியீடு இரைச்சலாகாமல் இருக்க உதவுகிறது.