ஜாவாஸ்கிரிப்ட் நிகழ்வு அங்கீகாரத்தின் பின்னால் உள்ள மேஜிக்
ஜாவாஸ்கிரிப்டைப் பயன்படுத்திக் கொண்ட எவருக்கும் நிகழ்வுகள் குறியீட்டு முறையின் இன்றியமையாத அங்கமாகும். போன்ற குறியீடு எழுதுதல் குறிப்பிட்ட தொடர்புகளின் மீது செயல்களைத் தொடங்க, ஒரு பொத்தானை அல்லது விசையை அழுத்துவது, ஒரு பழக்கமான அனுபவமாக இருக்கலாம். செயல்பாட்டின் வாதத்தின் பெயர் "நிகழ்வு" என்று அறிவிக்கப்படாத சூழ்நிலைகளில் கூட, ஜாவாஸ்கிரிப்ட் ஒரு நிகழ்வைக் கையாளுகிறது என்பதை எப்போதுமே அங்கீகரிக்கிறது என்பதில் நீங்கள் ஆர்வமாக இருக்கலாம்.
குறிப்பாக நிகழ்வின் பொருள் வெளிப்படையாகக் கூறப்படவில்லை என்று தோன்றும்போது, இது குழப்பமடையலாம். உதாரணமாக, உங்கள் செயல்பாட்டை எந்த தகவலை வழங்குவது மற்றும் எங்கு வழங்குவது என்பதை உலாவி எவ்வாறு தீர்மானிக்கிறது என்பதில் நீங்கள் ஆர்வமாக இருக்கலாம் document.addEventListener("கீடவுன்", செயல்பாடு(நிகழ்வு) {...}) போன்ற குறியீட்டை எழுதும் போது உருவாகிறது.
ஜாவாஸ்கிரிப்டில் நிகழ்வு கையாளுதல் அமைப்பு சில மறைக்கப்பட்ட வழிமுறைகளைக் கொண்டுள்ளது. அளவுருவின் பெயரைப் பொருட்படுத்தாமல், நிகழ்வு கேட்பவர் இணைக்கப்பட்டிருக்கும் போது, உலாவி தானாகவே ஒரு நிகழ்வுப் பொருளை அழைப்பின் செயல்பாட்டிற்கு வழங்குகிறது. நிகழ்வை நிர்வகிப்பதற்குத் தேவையான தரவைச் செயல்பாடு எப்போதும் பெறும் என்பதற்கு இது உத்தரவாதம் அளிக்கிறது.
இந்த இடுகை JavaScript இன் நிகழ்வு அமைப்பின் உள் செயல்பாடுகளை ஆராயும் மற்றும் வாதத்தின் பெயரைப் பொருட்படுத்தாமல் நிகழ்வுகள் எவ்வாறு அடையாளம் காணப்படுகின்றன மற்றும் அனுப்பப்படுகின்றன என்பதை நிரூபிக்கும்.
| கட்டளை | பயன்பாட்டின் உதாரணம் |
|---|---|
| addEventListener() | இந்த நுட்பத்தைப் பயன்படுத்தி ஒரு குறிப்பிட்ட நிகழ்வு வகையுடன் ("கீடவுன்" போன்றவை) ஒரு நிகழ்வு கையாளுதலை இணைக்க முடியும். நிகழ்வு கேட்கப்படுவதை உறுதிசெய்து, அது நிகழும்போது, நியமிக்கப்பட்ட செயல்பாட்டைத் தொடங்குகிறது. |
| KeyboardEvent() | ஒரு விசைப்பலகை நிகழ்வு கட்டமைப்பாளர். விசைப்பலகை நிகழ்வை (கீ டவுன் போன்றவை) நிரல்ரீதியாகப் பிரதிபலிக்க டெவலப்பர்களை இது செயல்படுத்துவதால், இது சோதனைக்கு உதவியாக இருக்கும். |
| event.key | ஒரு விசையை அழுத்தும் போது, இந்த சொத்து நிகழ்வு பொருளின் முக்கிய மதிப்பைப் பெறுகிறது. "a," "Enter" அல்லது "Shift" போன்ற அழுத்தப்பட்ட குறிப்பிட்ட விசையை இது குறிக்கிறது. |
| jest.fn() | ஜெஸ்ட் செயல்பாட்டால் உருவாக்கப்பட்ட போலி செயல்பாடு. செயல்பாட்டு அழைப்புகளை உருவகப்படுத்தவும், முழு தர்க்கத்தையும் உருவாக்காமல் அவற்றின் நடத்தையை ஆய்வு செய்யவும், இது யூனிட் சோதனையில் குறிப்பாக உதவியாக இருக்கும். |
| dispatchEvent() | இந்த அணுகுமுறையைப் பயன்படுத்தி ஒரு உறுப்பு மீது ஒரு நிகழ்வை கைமுறையாகத் தூண்டலாம். இது ஒரு "கீடவுன்" நிகழ்வை அனுப்ப எடுத்துக்காட்டுகள் முழுவதும் பயன்படுத்தப்படுகிறது, இது நிகழ்வைக் கேட்பவர் இடைமறித்து சோதனைக்கு பயன்படுத்தலாம். |
| expect() | எதிர்பார்ப்பு(), ஒரு மதிப்பு அல்லது செயல்பாடு எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை சரிபார்க்க, ஜெஸ்ட் சோதனை கட்டமைப்பின் ஒரு அங்கம் பயன்படுத்தப்படுகிறது. எடுத்துக்காட்டில் உள்ள நிகழ்வு கையாளுபவர் பொருத்தமான நிகழ்வுடன் அழைக்கப்படுகிறார் என்பதை இது சரிபார்க்கிறது. |
| try...catch | பிழைகளைத் தீர்ப்பதற்கு அர்ப்பணிக்கப்பட்ட ஒரு பகுதி. ட்ரை பிளாக்கிற்குள் ஏதேனும் குறியீடு பிழையை எழுப்பினால், ஸ்கிரிப்ட் உடைந்து போகாமல் இருக்க கேட்ச் பிளாக் இயங்கும். |
| console.error() | இந்த கட்டளையைப் பயன்படுத்தி கன்சோலில் பிழை செய்திகள் அச்சிடப்படுகின்றன. கேட்ச் பிளாக்கிற்குள் பிழை விவரங்களைப் பதிவு செய்ய இது பயன்படுகிறது, இது பிழைகாணலில் உதவுகிறது. |
ஜாவாஸ்கிரிப்ட் நிகழ்வு கேட்பவர்களில் நிகழ்வுகளை எவ்வாறு தானாகவே அங்கீகரிக்கிறது
பயனர் தொடர்புகளை நிர்வகிப்பதற்கான மிக முக்கியமான ஜாவாஸ்கிரிப்ட் செயல்பாடுகளில் ஒன்றாகும். இந்த முறையின் உதவியுடன், "கிளிக்" அல்லது "கீடவுன்" போன்ற ஒரு குறிப்பிட்ட நிகழ்வு வகையுடன் ஒரு நிகழ்வு கையாளுதலை இணைக்க முடியும். நீங்கள் பயன்படுத்தும் போது, உலாவி தானாகவே ஒரு நிகழ்வுப் பொருளை மீண்டும் அழைப்புச் செயல்பாட்டிற்கு அனுப்புகிறது addEventListener. விசை தள்ளப்பட்டது மற்றும் கிளிக் செய்யப்பட்ட உறுப்பு உட்பட அனைத்து நிகழ்வு விவரங்களும் இந்த பொருளில் உள்ளன. சுவாரஸ்யமான விஷயம் என்னவென்றால், செயல்பாட்டில் உள்ள அளவுருவின் பெயரைப் பொருட்படுத்தாமல், உலாவி எப்போதும் நிகழ்வு பொருளை வழங்கும் - "நிகழ்வு," "e," அல்லது "evt."
முதலில், மேலே உள்ள எடுத்துக்காட்டுகளில் "கீடவுன்" நிகழ்வைப் பயன்படுத்தி ஒரு எளிய அமைப்பைக் காண்கிறோம். உலாவி ஒரு நிகழ்வுப் பொருளை உருவாக்கி, பயனரால் ஒரு விசையை அழுத்தும் போது, அதை திரும்ப திரும்ப அழைக்கும் செயல்பாட்டிற்கு அனுப்புகிறது. அதன் பிறகு, செயல்பாடு நிகழ்வை கன்சோலில் பதிவுசெய்கிறது, முக்கிய வெற்றி மற்றும் கூடுதல் நிகழ்வு பண்புகள் உட்பட அனைத்து தொடர்புடைய தகவல்களையும் காண்பிக்கும். நினைவில் கொள்ள வேண்டிய முக்கியமான விஷயம் என்னவென்றால், நிகழ்வின் பொருளை நீங்கள் வெளிப்படையாக அறிவிக்க வேண்டிய அவசியமில்லை, ஏனெனில் நீங்கள் வழங்கிய வகையின் அடிப்படையில் நிகழ்வைக் கையாளுகிறது என்பதை JavaScript ஏற்கனவே அங்கீகரித்துள்ளது. .
வழக்கமான செயல்பாடு வெளிப்பாடுகளுக்கு அம்புக்குறி செயல்பாடுகளை மாற்றுவதையும் நாங்கள் பார்த்தோம். அம்புக்குறி செயல்பாடுகள் மற்றும் அவற்றின் அதிக சுருக்கப்பட்ட தொடரியல் ஆகியவற்றிற்கு ஒரே மாதிரியான நடத்தை உள்ளது: செயல்பாடு எவ்வாறு கட்டமைக்கப்பட்டாலும், நிகழ்வின் பொருளை உலாவி எப்போதும் செயல்பாட்டிற்கு வழங்கும். நிகழ்வு ஹேண்ட்லரை மீண்டும் பயன்படுத்தக்கூடியதாக மாற்ற, நாங்கள் அதை "handleKeyDown" என்ற ஒரு தனித்துவமான முறையாகவும் மாற்றியமைத்தோம். ஒரே செயல்பாட்டை பல நிகழ்வு கேட்பவர்களுடன் இணைக்க அல்லது உங்கள் குறியீட்டின் பல்வேறு பிரிவுகளில் மீண்டும் பயன்படுத்துவதன் மூலம் இது குறியீட்டை தெளிவாகவும் பராமரிக்கவும் எளிதாக்குகிறது.
பயன்படுத்தி , வலிமையை இன்னும் அதிகரிக்க பிழை கையாளுதல் அறிமுகப்படுத்தப்பட்டது. நிஜ-உலகப் பயன்பாடுகளுக்கு, இது ஒரு முக்கியமான அம்சமாகும், ஏனெனில் இது நிகழ்வுகளைக் கையாளும் போது எதிர்பாராத சூழ்நிலை ஏற்பட்டால் விபத்துகளைத் தடுக்க உதவுகிறது. எடுத்துக்காட்டாக, நிகழ்வுப் பொருள் எதிர்பார்த்தபடி உருவாக்கப்படாவிட்டால், கேட்ச் பிளாக் ஸ்கிரிப்ட்டின் மீதமுள்ளவற்றில் குறுக்கிடாமல் ஒரு பிழையைப் பதிவு செய்யும். கடைசியாக, ஹேண்ட்லர் எதிர்பார்த்தபடி செயல்படுவதை உறுதிசெய்ய, ஜெஸ்டைப் பயன்படுத்தி விசை அழுத்த நிகழ்வுகளை உருவகப்படுத்தும் யூனிட் சோதனையை நாங்கள் உருவாக்கினோம். பெரிய திட்டங்களுக்கு, உங்கள் நிகழ்வு கையாளுதல் அம்சங்கள் பல்வேறு சூழ்நிலைகளில் சரியாகச் செயல்படுவதை உறுதி செய்வதால் சோதனை அவசியம்.
ஜாவாஸ்கிரிப்டில் நிகழ்வு கையாளுதலை ஆய்வு செய்தல்: நிகழ்வு அளவுருக்கள் எவ்வாறு செயல்படுகின்றன
பயனர் உள்ளீட்டிற்கான நிகழ்வு கேட்பவர்களுடன் முன்-இறுதி JavaScript
// Approach 1: Basic event listener with "event" parameterdocument.addEventListener("keydown", function(event) {// The browser automatically passes the event object to this functionconsole.log(event); // Outputs the event object});// Explanation: The event object is implicitly passed to the function by the browser.
ஜாவாஸ்கிரிப்டில் நிகழ்வு கையாளுதலுக்கான அம்பு செயல்பாடுகளைப் பயன்படுத்துதல்
ES6 அம்பு செயல்பாடுகளுடன் முன்-இறுதி JavaScript
// Approach 2: Using ES6 arrow functionsdocument.addEventListener("keydown", (e) => {// Arrow function also accepts the event object, regardless of its nameconsole.log(e); // Outputs the event object});// Explanation: The event object is still passed, even with the shorthand arrow function syntax.
மாடுலர் ஜாவாஸ்கிரிப்ட்: மறுபயன்பாடுடன் கூடிய நிகழ்வு ஹேண்ட்லர்
மீண்டும் பயன்படுத்தக்கூடிய நிகழ்வு ஹேண்ட்லர்களுக்கான மாடுலர் ஜாவாஸ்கிரிப்ட்
// Approach 3: Modularizing the event handler for reusefunction handleKeyDown(event) {// Function to handle keydown event, reusable in other contextsconsole.log("Key pressed:", event.key); // Logs the key that was pressed}// Attaching the handler to the keydown eventdocument.addEventListener("keydown", handleKeyDown);// Explanation: Separate function increases modularity and reusability.
பிழை கையாளுதலுடன் நிகழ்வைக் கையாளுதல் வலிமையை உறுதி செய்தல்
வலிமைக்கான பிழை கையாளுதலுடன் உகந்த JavaScript
// Approach 4: Adding error handling for more robust event handlingfunction handleKeyDown(event) {try {// Attempt to process the key eventconsole.log("Key pressed:", event.key);} catch (error) {// Handle any potential errorsconsole.error("Error handling keydown event:", error);}}document.addEventListener("keydown", handleKeyDown);// Explanation: Adding try-catch blocks improves code reliability.
அலகு சோதனைகள் மூலம் சோதனை நிகழ்வு கையாளுதல்
நிகழ்வு கேட்பவர்களை சரிபார்க்க JavaScript அலகு சோதனைகளில் Jest பயன்படுத்தப்படுகிறது.
// Approach 5: Unit testing the event handler using Jestconst handleKeyDown = jest.fn((event) => {return event.key; // Return the key for testing});// Simulate a keydown event in the test environmenttest("handleKeyDown function receives keydown event", () => {const event = new KeyboardEvent("keydown", { key: "a" });document.dispatchEvent(event);expect(handleKeyDown).toHaveBeenCalledWith(event);});// Explanation: Unit tests ensure the event handler behaves correctly.
ஜாவாஸ்கிரிப்ட் நிகழ்வு கையாளுதலில் நிகழ்வு பிரச்சாரம் எவ்வாறு செயல்படுகிறது
ஜாவாஸ்கிரிப்ட் நிகழ்வு அமைப்பின் மற்றொரு முக்கிய அங்கமாகும். ஒரு நிகழ்வு, அத்தகைய "கீடவுன்" அல்லது "கிளிக்" ஆனது நடந்து முடிந்துவிடாது. அது தொடர்ந்து செயல்பட்டு வருகிறது. மாறாக, இது ஒரு நிகழ்வு ஓட்டத்தில் உள்ள கூறுகளின் ஏற்பாட்டைப் பின்பற்றுகிறது. கைப்பற்றும் கட்டம், இலக்கு கட்டம் மற்றும் குமிழி கட்டம் ஆகியவை இந்த ஓட்டத்தின் மூன்று நிலைகளாகும். பெரும்பாலான நிகழ்வுகள் குமிழிப்பு கட்டத்தில் இயல்புநிலையாக இருக்கும், அதாவது இலக்கு உறுப்பு முதல் அதன் முன்னோடி வரை அவை சிற்றலை விளைவு போல பரவுகின்றன.
போன்ற நுட்பங்களைப் பயன்படுத்தி மற்றும் , நிகழ்வுகள் எவ்வாறு பரவுகின்றன என்பதை JavaScript டெவலப்பர்கள் கட்டுப்படுத்தலாம். உதாரணமாக, நீங்கள் பயன்படுத்தலாம் DOM படிநிலையில் அதிக அளவில் நிகழ்வதை நீங்கள் விரும்பவில்லை எனில், ஒரு நிகழ்வானது குமிழிவதை நிறுத்துவதற்கு. ஒன்றுக்கு மேற்பட்ட கூறுகள் ஒரே நிகழ்வைக் கேட்கும் போது, ஆனால் நீங்கள் ஒரு குறிப்பிட்ட ஹேண்ட்லரை மட்டுமே இயக்க விரும்பினால், இது மிகவும் உதவியாக இருக்கும்.
மேலும், நிகழ்வுப் பரப்புதலைப் பயன்படுத்தும் ஒரு பயனுள்ள முறை நிகழ்வுப் பிரதிநிதித்துவம் ஆகும். ஒவ்வொரு குழந்தை உறுப்புக்கும் ஒன்றைச் சேர்ப்பதற்கு மாறாக, பெற்றோர் உறுப்புடன் நிகழ்வு கேட்பவரைச் சேர்க்கலாம் மற்றும் நிகழ்வுகளை அதில் "குமிழி" செய்ய அனுமதிக்கலாம். மாறும் வகையில் அறிமுகப்படுத்தப்பட்ட உருப்படிகளில் நீங்கள் நிகழ்வுகளை நிர்வகிக்க வேண்டிய சூழ்நிலைகளில், இந்த அணுகுமுறை மிகவும் பயனுள்ளதாக இருக்கும். இது குறியீடு நிர்வாகத்தை எளிதாக்குகிறது மற்றும் நினைவக பயன்பாட்டைக் குறைக்கிறது, குறிப்பாக நிறைய ஊடாடும் கூறுகளைக் கொண்ட பயன்பாடுகளில்.
- ஜாவாஸ்கிரிப்டில் நிகழ்வு குமிழிதல் என்றால் என்ன?
- "நிகழ்வு குமிழ்" எனப்படும் நிகழ்வு DOM படிநிலையின் உள் உறுப்புகளில் ஒரு நிகழ்வு எவ்வாறு தொடங்குகிறது மற்றும் வெளிப்புற கூறுகளுக்கு மேல்நோக்கி நகர்கிறது என்பதை விவரிக்கிறது.
- நிகழ்வு பிரச்சாரத்தை நான் எவ்வாறு நிறுத்துவது?
- குமிழிப்பு கட்டத்தில், இதைப் பயன்படுத்தி ஒரு நிகழ்வு மேலும் பரவாமல் தடுக்கலாம் நுட்பம்.
- என்ன வித்தியாசம் மற்றும் ?
- மூலம் நிகழ்வு குமிழி தடுக்கப்படுகிறது , மேலும் இது இன்னும் இருக்கும் எந்தக் கேட்பவர்களுடனும் சேர்ந்து நிகழ்த்தப்படுவதிலிருந்து தடுக்கப்படுகிறது .
- JavaScript இல் நிகழ்வு பிரதிநிதித்துவம் என்றால் என்ன?
- ஒவ்வொரு குழந்தை உறுப்புக்கும் பதிலாக பெற்றோர் உறுப்புடன் நிகழ்வு கேட்பவரை இணைப்பதன் மூலம், நீங்கள் நிகழ்வு பிரதிநிதித்துவ நுட்பத்தைப் பயன்படுத்தலாம். குழந்தைகளிடமிருந்து ஏதாவது "குமிழிகள்" வரும்போது பெற்றோருக்குத் தெரிவிக்கப்படும்.
- ஒரே நிகழ்வுக்கு பல கேட்பவர்களைச் சேர்க்கலாமா?
- உண்மையில், ஜாவாஸ்கிரிப்டில் ஒரே நிகழ்வு வகைக்கான உறுப்புடன் ஒன்றுக்கு மேற்பட்ட நிகழ்வு கேட்பவர்களை நீங்கள் இணைக்கலாம். அவை சேர்க்கப்பட்ட வரிசையில், ஒவ்வொரு கேட்பவரும் அழைக்கப்படுவார்கள்.
ஜாவாஸ்கிரிப்ட்டின் தானியங்கி நிகழ்வு அங்கீகார அம்சம் சமகால வலை வளர்ச்சிக்கு அவசியம். செயல்பாட்டின் பெயரைப் பொருட்படுத்தாமல், மொழி கையாளுதலை செய்கிறது நிகழ்வுப் பொருளைத் தானாகக் கொடுப்பதன் மூலம் நிகழ்வுகளைக் கிளிக் செய்யவும்.
இந்த அமைப்பின் பயன்பாடு மற்றும் பரப்புதல் கட்டுப்பாடு மற்றும் நிகழ்வு பிரதிநிதித்துவம் போன்ற அதிநவீன முறைகள் மூலம், டெவலப்பர்கள் சிக்கலான பயனர் தொடர்புகளை திறம்பட நிர்வகிக்க முடியும். இந்த நுட்பங்களைப் பற்றி அறிந்திருப்பதன் மூலம், நீங்கள் மிகவும் ஆற்றல் வாய்ந்த, ஊடாடும் மற்றும் பயனர் உள்ளீட்டிற்கு பதிலளிக்கக்கூடிய வலைத்தளங்களை உருவாக்கலாம்.
- ஜாவாஸ்கிரிப்ட் பற்றிய விரிவான ஆவணங்கள் முறை மற்றும் நிகழ்வு பொருள் கையாளுதல் ஆகியவற்றைக் காணலாம் MDN Web Docs - addEventListener .
- ஜாவாஸ்கிரிப்ட் நிகழ்வு பிரச்சாரம் மற்றும் பிரதிநிதித்துவத்தின் ஆழமான ஆய்வுக்கு, பார்க்கவும் JavaScript.info - குமிழ் மற்றும் பிடிப்பு .
- Jest ஐப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் நிகழ்வு சோதனையின் முக்கியக் கருத்துகளைப் புரிந்துகொள்வது இங்கு விரிவாகக் கொடுக்கப்பட்டுள்ளது ஜெஸ்ட் ஆவணம் .