இந்த டுடோரியல் ஜாவாஸ்கிரிப்ட் மூலம் onClick ஐ எவ்வாறு அமைப்பது என்பது குறித்த செயல்முறையை வரையறுக்கும்.
ஜாவாஸ்கிரிப்ட் மூலம் onClick அமைப்பது எப்படி
அமைக்க கிளிக் செய்யவும் JavaScript உடன், இரண்டு வெவ்வேறு முறைகள் உள்ளன, அவை:
- HTML உறுப்புகளுக்கு மதிப்பை வழங்குவதே முதல் முறை கிளிக் செய்யவும் ஜாவாஸ்கிரிப்ட் பயன்படுத்தி பண்பு.
- இரண்டாவது முறை, HTML நிகழ்வில் ஒரு நிகழ்வு கேட்பவரை வெளிப்படையாகச் சேர்ப்பதாகும், இது ' கிளிக் செய்யவும் ' நிகழ்வு.
எடுத்துக்காட்டு 1: ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி HTML உறுப்புகளின் கிளிக் பண்புக்கூறுக்கு மதிப்பை ஒதுக்கவும்
HTML கோப்பில், ஒரு தலைப்பு மற்றும் ஒரு பொத்தானை உருவாக்கவும். என்னை கிளிக் செய்யவும் 'ஐடியுடன்' js ” இது ஜாவாஸ்கிரிப்ட் செயல்பாட்டைக் கிளிக் செய்யும் போது தூண்டும்.
< h2 > அமைக்கவும் ஜாவாஸ்கிரிப்ட் மூலம் சொத்தை கிளிக் செய்யவும் h2 >
< பொத்தான் ஐடி = 'js' > என்னை கிளிக் செய்யவும் பொத்தானை >
பின்வரும் கட்டத்தில், உருவாக்கப்பட்ட பொத்தான் அணுகப்படும் மற்றும் ஒரு ' கிளிக் செய்யவும் ” என்ற பண்பு அதனுடன் இணைக்கப்படும். பொத்தானைக் கிளிக் செய்வதன் மூலம், குறிப்பிட்ட செயல்பாடு செயல்படுத்தப்படும் மற்றும் ' பாணி.பின்னணி நிறம் ” பண்பு பொத்தான் நிறத்தை பின்வருமாறு மாற்றும்:
ஆவணம். getElementById ( 'js' ) . கிளிக் செய்யவும் = செயல்பாடு jsFunc ( ) {
ஆவணம். getElementById ( 'js' ) . பாணி . பின்னணி நிறம் = 'ஊதா' ;
}
தொடர்புடைய வெளியீடு இருக்கும்:
எடுத்துக்காட்டு 2: HTML நிகழ்வில் நிகழ்வு கேட்பவரை வெளிப்படையாகச் சேர்க்கவும்
ஒரு பொத்தானை உருவாக்கவும் ' இங்கே கிளிக் செய்யவும்! 'மற்றும் ஒரு ஐடியை ஒதுக்குகிறது' நிகழ்வு ” இது addEventListener() முறையைத் தூண்டும் 'கிளிக்' நிகழ்வு:
< பொத்தான் ஐடி = 'நிகழ்வு' > இங்கே கிளிக் செய்யவும் ! வலுவான > பொத்தானை வலுவான >>
பொத்தானைப் பயன்படுத்தி அதைப் பெறவும் ஐடி பின்னர் இணைக்கவும் ' addEventListener() 'ஒரு' கடந்து செல்லும் முறை கிளிக் செய்யவும் 'நிகழ்வு மற்றும் ஒரு செயல்பாடு' EventFunc ” பொத்தானின் பின்னணி நிறம் மாற்றப்படும்.
ஆவணம். getElementById ( 'நிகழ்வு' ) . addEventListener ( 'கிளிக்' , EventFunc ) ;செயல்பாடு eventFunc ( ) {
ஆவணம். getElementById ( 'நிகழ்வு' ) . பாணி . பின்னணி நிறம் = 'பச்சை' ;
}
வெளியீடு
எடுத்துக்காட்டு 3: அனைத்து onClick முறைகளையும் ஒரே நேரத்தில் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டில், அனைத்து முறைகளின் வேலையும் ஒரே நேரத்தில் காட்டப்படும். முதலில், HTML குறிச்சொல்லிலேயே onclick பண்புக்கூறைச் சேர்ப்பதற்கான இயல்புநிலை வழி. அதன் பிறகு, ஜாவாஸ்கிரிப்ட் உதவியுடன் onclick பண்புக்கூறை அமைக்கும் இரண்டு முறைகளும் நிரூபிக்கப்பட்டுள்ளன.
பின்வரும் எடுத்துக்காட்டில், மூன்று பொத்தான்களை உருவாக்கி, onclick பண்புக்கூறின் செயல்பாட்டைப் பார்க்கவும்.
- முதல் பொத்தான்' கிளிக் செய்யவும் 'அழைப்பார்' htmlFunc() ” கிளிக் நிகழ்வில்.
- பொத்தான்' என்னை கிளிக் செய்யவும் 'அதற்கு ஒதுக்கப்பட்ட ஐடியுடன் அணுகப்படும்' js ” பின்னர் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி பொத்தானின் கிளிக் பண்புக்கூறுக்கு மதிப்பை ஒதுக்கவும்.
- பொத்தான்' இங்கே கிளிக் செய்யவும்! 'ஐடியைப் பயன்படுத்தி அணுகப்படும்' நிகழ்வு 'பின்னர் இணைக்கவும்' addEventListener() ”அதனுடன் கூடிய முறை:
< பொத்தான் ஐடி = 'js' > என்னை கிளிக் செய்யவும் பொத்தானை >< br >< br >
< பொத்தான் ஐடி = 'நிகழ்வு' > இங்கே கிளிக் செய்யவும் ! பொத்தானை >
கீழே உள்ள செயல்பாடு ' கிளிக் செய்யவும் 'பொத்தானின் நிகழ்வு' கிளிக் செய்யவும் ”:
செயல்பாடு htmlFunc ( ) {எச்சரிக்கை ( 'HTML onClick நிகழ்வால் கிளிக் செய்யப்பட்ட பொத்தான்' ) ;
}
கிளிக் செய்யும் போது ' என்னை கிளிக் செய்யவும் ” பொத்தான், எச்சரிக்கை செய்தி காட்டப்படும் இடத்தில் பின்வரும் செயல்பாடு தூண்டும்.
ஆவணம். getElementById ( 'js' ) . கிளிக் செய்யவும் = செயல்பாடு jsFunc ( ) {எச்சரிக்கை ( 'ஜாவாஸ்கிரிப்ட் ஆன் கிளிக் செயல்பாட்டால் கிளிக் செய்யப்பட்ட பொத்தான்' ) ;
}
கொடுக்கப்பட்ட செயல்பாடு பொத்தானைத் தூண்டும் ' இங்கே கிளிக் செய்யவும்! ”:
ஆவணம். getElementById ( 'நிகழ்வு' ) . addEventListener ( 'கிளிக்' , EventFunc ) ;செயல்பாடு eventFunc ( ) {
எச்சரிக்கை ( 'ஜாவாஸ்கிரிப்ட் கிளிக் செய்த பொத்தான் on Click with EventListener Method' ) ;
}
வெளியீடு ஒவ்வொரு பொத்தானைக் கிளிக் செய்வதிலும் எச்சரிக்கை செய்திகளைக் காண்பிக்கும்:
முடிவுரை
ஜாவாஸ்கிரிப்ட் மூலம் ஆன்க்ளிக்கை அமைக்க, இரண்டு வெவ்வேறு அணுகுமுறைகள் உள்ளன, முதலாவது ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி HTML உறுப்பின் ஆன்க்ளிக் பண்புக்கூறுக்கு மதிப்பை வழங்குவது மற்றும் இரண்டாவது அணுகுமுறையானது HTML நிகழ்வில் ஒரு நிகழ்வு கேட்பவரை வெளிப்படையாகச் சேர்ப்பது ஆகும். கிளிக் செய்யவும் ' நிகழ்வு. இந்த டுடோரியல் ஜாவாஸ்கிரிப்ட் உடன் onClick ஐ அமைப்பதற்கான வழிமுறைகளை எடுத்துக்காட்டுகளுடன் வரையறுத்துள்ளது.