நிகழ்வு ஓட்டம் நேரத்தில் ஜாவாஸ்கிரிப்டில் நிகழ்வு குமிழ் மற்றும் நிகழ்வு பிடிப்பு ஆகியவை அதிகம் பயன்படுத்தப்படுகின்றன. HTML DOM API இல் நிகழ்வு பரப்புதலுக்கான இரண்டு வழிகள் இவை. ஜாவாஸ்கிரிப்டில் நிகழ்வு பப்ளிங் மற்றும் நிகழ்வு பிடிப்பு பற்றிய இந்த கட்டுரை நமக்கு ஏன் தேவை என்று விரிவாக விவரிக்கும் பின்வரும் வரிசையில்:
ஜாவாஸ்கிரிப்டில் நிகழ்வு பப்ளிங் என்றால் என்ன?
நிகழ்வு பப்ளிங் என்பது ஒரு வலை பயன்பாடு அல்லது வலைப்பக்கத்தைப் பயன்படுத்தி உருவாக்கும்போது மக்கள் கண்டிப்பாகக் காண வேண்டிய சொல் . அடிப்படையில், நிகழ்வு பப்ளிங் என்பது ஒரு நுட்பமாகும், இதில் ஒரு உருப்படி மற்றொரு உருப்படிக்கு கூடு கட்டப்படும்போது நிகழ்வு கையாளுபவர்கள் அழைக்கப்படுகிறார்கள், அதே நிகழ்வில் இருக்க வேண்டும். இது என்காப்ஸுலேஷனுக்கு ஒத்ததாகும்.
ஜாவாஸ்கிரிப்டில் நிகழ்வு கையாளுதலின் ஒரு சிறிய பகுதி மட்டுமே நிகழ்வு பப்ளிங். இதை நன்கு புரிந்துகொள்ள நிகழ்வு பரப்புதல் மற்றும் நிகழ்வு குமிழியை எவ்வாறு ஆதரிக்கிறது என்பதைப் பற்றி நாம் தெரிந்து கொள்ள வேண்டும்.
நிகழ்வு பரப்புதல் என்றால் என்ன?
நிகழ்வு பரப்புதலை பெற்றோர் வார்த்தையாக நிகழ்வு குமிழ் மற்றும் அதன் குழந்தையாகக் கைப்பற்றலாம்.இது பின்வருமாறு குறிப்பிடப்படுகிறது:
நீங்கள் எந்தவொரு படத்திலும் கிளிக் செய்தால், அது ஒரு கிளிக் நிகழ்வை உருவாக்குவது மட்டுமல்லாமல், அது பெற்றோர் “a” மற்றும் தாத்தா “li” க்கு செல்லும். இந்த வழியில் செயல்பாட்டின் பரப்புதல் நடைபெறுகிறது. இங்கே படம் குழந்தையாகக் கருதப்படுகிறது, மேலும் கிளிக் உருவாக்கப்படும் நிகழ்வு இலக்கு இது. படம் அதன் முன்னோர்களுடன் சேர்ந்து ஒரு மர சொற்களில் கிளையை உருவாக்குகிறது. நிகழ்வு பரப்புகின்ற பாதையை நாம் அறிந்துகொள்வதால் கிளை முக்கியமானது.
கேட்போர் ஒவ்வொருவரும் முறையே நிகழ்வு பொருளுடன் அழைக்கப்படுகிறார்கள், இது நிகழ்வு பற்றிய தகவல்களை சேகரிக்கிறது. கொடுக்கப்பட்ட நிகழ்வுக்கு அனைத்து கேட்பவர்களையும் அழைக்கும் செயல்முறையை நாங்கள் அறிந்திருப்பதால் இந்த பரப்புதல் மிகவும் முக்கியமானது. கிளை நிர்ணயம் நிலையானது என்பதை மேலே உள்ள படத்திலிருந்து நாம் காணலாம். நிகழ்வின் போது ஏற்படும் எந்த மர மாற்றங்களும் புறக்கணிக்கப்படும். இங்கே பரப்புதல் இருதரப்பு ஆகும், இது சாளரத்திலிருந்து நிகழ்வு இலக்குக்குச் சென்று திரும்பி வருகிறது. இங்கே பரப்புதல் மூன்று முக்கிய வகைகளாக வகைப்படுத்தப்பட்டுள்ளது. அவைகளெல்லாம்:
- பிடிப்பு கட்டம்: சாளரத்தில் இருந்து நிகழ்வு இலக்கு கட்டத்திற்கு செல்கிறது.
- இலக்கு கட்டம்: இது இலக்கு கட்டமாகும்.
- குமிழி கட்டம்: நிகழ்வு இலக்கு பெற்றோரிடமிருந்து மீண்டும் சாளரத்திற்கு.
நிகழ்வு பிடிப்பு என்றால் என்ன?
இந்த கட்டத்தில், பிடிப்பவர் கேட்போர் அதன் மதிப்பு “உண்மை” என்று பதிவு செய்யப்பட்டுள்ளது. இது இவ்வாறு எழுதப்பட்டுள்ளது:
el.addEventListener ('கிளிக்', கேட்பவர், உண்மை)இங்கே கேட்பவரின் மதிப்பு “உண்மை” என்று பதிவு செய்யப்பட்டுள்ளது, எனவே இந்த நிகழ்வு கைப்பற்றப்படுகிறது. மதிப்பு இல்லை என்றால், இயல்புநிலையாக மதிப்பு தவறானது மற்றும் நிகழ்வு கைப்பற்றப்படாது. எனவே இந்த கட்டத்தில் அந்த நிகழ்வு அதன் மதிப்பு உண்மையாக இருந்தால் மட்டுமே சாளரத்திலிருந்து தங்கள் வழியைக் கண்டுபிடித்து அழைக்கப்பட்டு கைப்பற்றப்படுகிறது.
நிகழ்வு இலக்கு கட்டத்தில், பதிவுசெய்யப்பட்ட அனைத்து கேட்பவர்களும் அவர்களின் கொடி நிலையை பொருட்படுத்தாமல் உண்மை அல்லது பொய் என்று அழைக்கப்படுகிறார்கள்.
ஜாவாஸ்கிரிப்டில் நிகழ்வு குமிழ் மற்றும் நிகழ்வு பிடிப்பு பயன்பாடு
குமிழ் கட்டத்தில், கைப்பற்றாதவர் மட்டுமே அழைக்கப்படுகிறார், இது கொடி மதிப்பை 'பொய்' என்று கொண்டிருக்கும் நிகழ்வுகள். நிகழ்வு குமிழ் மற்றும் நிகழ்வு பிடிப்பு DOM (ஆவண பொருள் மாதிரி) சொற்களில் மிகவும் பயனுள்ளதாகவும் முக்கியமானதாகவும் உள்ளன.
el.addEventListener ('கிளிக்', கேட்பவர், பொய்) // கேட்பவர் el.addEventListener ('கிளிக்', கேட்பவர்) // கேட்பவர் பிடிக்கவில்லைமேலே உள்ள குறியீடு குமிழ் மற்றும் கைப்பற்றும் கட்டத்தின் செயல்பாட்டைக் காட்டுகிறது. எல்லா நிகழ்வுகளும் நிகழ்வு இலக்குக்குச் செல்லாது. அவர்களில் சிலர் குமிழ்வதில்லை. இலக்கு கட்டத்திற்குப் பிறகு அவர்களின் பயணம் நிறுத்தப்படும். மூன்று நிகழ்வு கட்ட ஓட்டம் பின்வரும் வரைபடத்தில் விளக்கப்பட்டுள்ளது:
பைனரி முதல் தசம ஜாவா குறியீடு
நிகழ்வு குமிழ் அனைத்து வகையான நிகழ்வுகளிலும் வேலை செய்யாது, இருப்பினும், கேட்பவர் கொண்டிருக்க வேண்டும் “.பப்பிள் நிகழ்வு பொருளின் பூலியன் சொத்து. வேறு சில பண்புகள் பின்வருமாறு:
- e.target: இது நிகழ்வு இலக்கைக் குறிக்கிறது.
- e.currentTarget: இது தற்போதைய கேட்போர் பதிவுசெய்யப்பட்ட பயன்முறையாகும். இங்கே பயன்படுத்துவதன் மூலம் மதிப்பு குறிப்பிடப்படுகிறது இது முக்கிய சொல்.
- e.eventPhase: இது ஒரு முழு எண், இது போன்ற மற்ற மூன்று முக்கிய சொற்களைக் குறிக்கிறது கைப்பற்றுதல்_ கட்டம், பப்ளிங்_பாஸ், AT_Target கட்டம்.
வேலை செய்யும் முறை
மேற்கண்ட விளக்கத்தில் ஒரு கூர்ந்து கவனிப்போம். “ButtonOne” உறுப்பைக் கிளிக் செய்வோம், உடனடியாக ஒரு நிகழ்வு தூண்டப்படும். பொதுவாக ஒரு நிகழ்வு மரத்தின் மிக உயர்ந்த உறுப்பு வேரிலிருந்து அதன் பயணத்தைத் தொடங்குகிறது. அது 'பொத்தான்ஒன்' என்ற இலக்கு நிகழ்வை மரத்தைப் பின்தொடர்கிறது. இது எவ்வாறு பயணிக்கிறது என்பது இங்கே:
படத்தில் காட்டப்பட்டுள்ளபடி, நிகழ்வு இலக்கு இலக்கு நிகழ்வை அடையும் DOM சொற்களஞ்சியங்கள் வழியாக செல்கிறது. இப்போது நிகழ்வு அதன் இலக்கை அடைந்ததும் அது முடிவடையாது. கீழேயுள்ள படத்தில் விளக்கப்பட்டுள்ளபடி இது DOM சொற்களுக்குள் தொடர்கிறது.
முன்பைப் போலவே, நிகழ்வின் பாதையில் உள்ள ஒவ்வொரு உறுப்புகளும் மேலே செல்லும்போது அதன் இருப்பைப் பற்றி அறிவிக்கப்படும். இது இப்படியே செல்லும்போது, நாங்கள் செயல்முறையை நிறுத்த முடியுமா இல்லையா என்பதை நீங்கள் சிந்திக்க வேண்டும். சரி, கேள்விக்கான பதில் ஆம், நிகழ்வின் பிரச்சாரத்தை நாம் நிறுத்தலாம். இது செயல்படுத்துவதன் மூலம் செய்யப்படுகிறது “StopPropagation” நிகழ்வு பொருளின் முறை.
window.addEventListener ('கிளிக்', e => {e.stopPropagation () true, true) window.addEventListener ('கிளிக்', கேட்பவர் ('c1'), உண்மை) சாளரம். '), உண்மை) window.addEventListener (' கிளிக் ', கேட்பவர் (' b1 ')) window.addEventListener (' கிளிக் ', கேட்பவர் (' b2 '))முக்கிய சொல்லைப் பயன்படுத்துவதன் மூலம், பிரச்சாரத்தை நிறுத்த முடியும். இது போன்ற முக்கிய வார்த்தைகளை நாங்கள் பயன்படுத்தும்போது “ stopPropagation ” முக்கிய நிகழ்வுகளின் கீழ் உள்ள அனைத்து நிகழ்வுகளும் அழைக்கப்படவில்லை, எனவே மேலே உள்ள குறியீட்டில் குறிப்பிடப்பட்டுள்ளதால் அவை அழைக்கப்படாது. மற்றொரு முக்கிய சொல் உள்ளது “ stopImmediatePropagation ”. பெயர் குறிப்பிடுவது போல, உடன்பிறப்புகளின் நடவடிக்கைகளை உடனடியாக நிறுத்துகிறது.
இதன் மூலம், எங்கள் கட்டுரையின் முடிவுக்கு வந்துள்ளோம். ஜாவாஸ்கிரிப்டில் நிகழ்வு பப்ளிங் மற்றும் நிகழ்வு பிடிப்பு என்ன என்பதை நீங்கள் புரிந்து கொண்டீர்கள் என்று நம்புகிறேன்.
ஜாவாஸ்கிரிப்டில் நிகழ்வு பப்ளிங் மற்றும் நிகழ்வு பிடிப்பு பற்றி இப்போது உங்களுக்குத் தெரியும், பாருங்கள் வழங்கியவர் எடுரேகா. HTML5, CSS3, Twitter பூட்ஸ்டார்ப் 3, jQuery மற்றும் Google API களைப் பயன்படுத்தி ஈர்க்கக்கூடிய வலைத்தளங்களை எவ்வாறு உருவாக்குவது மற்றும் அமேசான் எளிய சேமிப்பக சேவைக்கு (S3) பயன்படுத்துவது எப்படி என்பதை அறிய வலை அபிவிருத்தி சான்றிதழ் பயிற்சி உங்களுக்கு உதவும்.
எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? தயவுசெய்து 'ஜாவாஸ்கிரிப்டில் நிகழ்வு குமிழ் மற்றும் நிகழ்வு பிடிப்பு' இன் கருத்துகள் பிரிவில் குறிப்பிடவும், நாங்கள் உங்களிடம் திரும்புவோம்.