JavaScript ஐப் பயன்படுத்தி event.target ஒரு குறிப்பிட்ட வகுப்பு உள்ளதா எனச் சரிபார்க்கவும்

CSS ஸ்டைலிங்கைப் பயன்படுத்தி உறுப்புகளை ஸ்டைல் ​​செய்யவும். இதைச் செய்ய, CSS வகுப்பை உருவாக்கவும். .div ” அனைத்து div உறுப்புகளுக்கும்:

உருவாக்கவும் ' .சென்டர் பக்கத்தின் மையத்தில் உறுப்புகளை அமைப்பதற்கான வகுப்பு:

இப்போது, ​​ஸ்டைலிங்கிற்காக, ஒவ்வொரு டிவியும் தனித்தனியாக அவர்களுக்கு ஒரு CSS வகுப்பை உருவாக்குகிறது. முதல் பிரிவுக்கு, பின்னணி நிறத்தை அமைக்கவும் ' சிவப்பு 'இல்' div1Style ' வர்க்கம்:

இரண்டாவது பிரிவிற்கு, பின்னணி நிறத்தை அமைக்கவும் ' முள்ளங்கி இளஞ்சிவப்பு ' பயன்படுத்தி ' rgba(194, 54, 77) 'குறியீடு' இல் div2Style ' வர்க்கம்:

பின்னணி நிறத்தை அமைக்கவும் ' இளஞ்சிவப்பு 'மூன்றாவது பிரிவை உருவாக்குவதன் மூலம்' div3Style ' வர்க்கம்:

மேலே உள்ள HTML குறியீட்டை இயக்கிய பிறகு, வெளியீடு இப்படி இருக்கும்:

இப்போது, ​​ஒரு ஜாவாஸ்கிரிப்ட் கோப்பில் அல்லது ' கையால் எழுதப்பட்ட தாள் ” குறிச்சொல், நிகழ்வு.இலக்கு குறிப்பிட்ட வகுப்பு உள்ளதா இல்லையா என்பதைச் சரிபார்க்க கீழே கொடுக்கப்பட்டுள்ள குறியீட்டைப் பயன்படுத்தவும்:

மேலே உள்ள குறியீடு துணுக்கில்:

• முதலில், DOM இல் உள்ள ஒவ்வொரு கிளிக்கையும் கையாளும் ஒரு கிளிக் நிகழ்வில் நிகழ்வு கேட்பவரை இணைக்கவும்.
• பின்னர், தூண்டப்பட்ட நிகழ்வில் CSS வகுப்பு உள்ளதா என்பதைச் சரிபார்க்கவும் ' மையம் 'அல்லது' உதவியுடன் இல்லை classList.class() ”முறை.

வெளியீடு

மேலே உள்ள GIF, div1 ஆனது ' மையம் 'வகுப்பு காட்டுவது போல்' உண்மை ', div2 மற்றும் div3 காட்சி ' பொய் ' எச்சரிக்கை பெட்டியில், அதாவது ' மையம் ' வர்க்கம்.

முறை 2: event.target ஆனது போட்டிகள்() முறையைப் பயன்படுத்தி ஒரு குறிப்பிட்ட வகுப்பு உள்ளதா எனச் சரிபார்க்கவும்

மற்றொரு ஜாவாஸ்கிரிப்ட் முன் வரையறுக்கப்பட்ட முறை ' போட்டிகளில்() ” ஒரு குறிப்பிட்ட வர்க்கம் ஒரு உறுப்பு அல்லது நிகழ்விற்குச் சொந்தமானதா என்பதைச் சரிபார்க்க பயன்படுத்தப்படலாம். ' வகுப்பு-பெயர் ” என்பது ஒரு உறுப்பு அல்லது இலக்கு நிகழ்வானது ஒரு குறிப்பிட்ட வகுப்பை உள்ளடக்கியதா இல்லையா என்பதை தீர்மானிக்க தேவையான ஒரே அளவுரு ஆகும்.

தொடரியல்

கீழே கொடுக்கப்பட்டுள்ள தொடரியல் பொருத்தங்கள்() முறைக்கு பயன்படுத்தப்படுகிறது:

மேலே உள்ள தொடரியல்,

• ' நிகழ்வு.இலக்கு ” என்பது தூண்டப்பட்ட நிகழ்வாகும், அதில் குறிப்பிட்ட வகுப்பு உள்ளதா இல்லையா என்பதைச் சரிபார்க்கப்படும்.
• ' வகுப்பு-பெயர் ” என்பது தூண்டப்பட்ட நிகழ்வின் ஒரு பகுதியாக இருக்கும் CSS வகுப்பின் பெயரைக் குறிக்கிறது. மேட்ச்ஸ்() முறையானது வகுப்பின் பெயரை ஒரு புள்ளியுடன் (.) எடுத்துக் கொள்கிறது, அது '' என்ற வார்த்தையைக் குறிக்கிறது. வர்க்கம் ”.

திரும்ப மதிப்பு

இலக்கு நிகழ்வில் ஒரு வகுப்பு இருந்தால், அது திரும்பும் ' உண்மை 'வேறு,' பொய் ” திரும்பியது.

உதாரணமாக

ஜாவாஸ்கிரிப்ட் கோப்பு அல்லது ஸ்கிரிப்ட் குறிச்சொல்லில், '' ஐப் பயன்படுத்தி, event.targetக்கு ஒரு குறிப்பிட்ட வகுப்பு உள்ளதா இல்லையா என்பதைச் சரிபார்க்க, கீழே உள்ள குறியீட்டு வரிகளைப் பயன்படுத்தவும். போட்டிகளில்() ”முறை:

மேலே உள்ள குறியீட்டு வரிகளில்:

• முதலில், DOM இல் உள்ள ஒவ்வொரு கிளிக்கையும் கையாளும் ஒரு கிளிக் நிகழ்வில் நிகழ்வு கேட்பவரை இணைக்கவும்.
• பின்னர், '' என்பதை சரிபார்க்கவும் div3Style ' CSS வகுப்பு ஒரு தூண்டப்பட்ட நிகழ்வில் உள்ளது ' போட்டிகளில்() ”முறை.
• அது இருந்தால், எச்சரிக்கை() ஒரு செய்தியைக் காட்டுகிறது ' உண்மை ', வேறு' பொய் ”.

வெளியீடு

மேலே உள்ள GIF, div3 மட்டுமே ' div3Style 'வகுப்பு காட்டுவது போல்' உண்மை ”.

முடிவுரை

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