நிகழ்வுகளுக்கு வினைதெரிதல்
ஒரு நிகழ்வு ஏற்படும் போது JavaScript இயக்கப்படலாம், ஒரு பயனர் HTML உறுப்பில் கிளிக் செய்யும் போது போல.
ஒரு பயனர் ஒரு உறுப்பில் கிளிக் செய்யும் போது குறியீட்டை இயக்க, ஒரு HTML நிகழ்வு பண்புக்கூறுக்கு JavaScript குறியீட்டைச் சேர்க்கவும்:
onclick=JavaScriptHTML நிகழ்வுகளின் எடுத்துக்காட்டுகள்:
- பயனர் சுட்டியைக் கிளிக் செய்யும் போது
- வலைப் பக்கம் ஏற்றப்பட்ட பிறகு
- படம் ஏற்றப்பட்ட பிறகு
- சுட்டி ஒரு உறுப்பின் மேல் நகரும் போது
- உள்ளீட்டுப் புலம் மாற்றப்படும் போது
- HTML படிவம் சமர்ப்பிக்கப்படும் போது
- பயனர் விசையை அழுத்தும் போது
நிகழ்வு எடுத்துக்காட்டுகள்
எடுத்துக்காட்டு 1
இந்த எடுத்துக்காட்டில், பயனர் அதைக் கிளிக் செய்யும் போது <h1> உறுப்பின் உள்ளடக்கம் மாறுகிறது:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>எடுத்துக்காட்டு 2
இந்த எடுத்துக்காட்டில், நிகழ்வு கையாளியிலிருந்து ஒரு செயல்பாடு அழைக்கப்படுகிறது:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>HTML நிகழ்வு பண்புக்கூறுகள்
HTML உறுப்புகளுக்கு நிகழ்வுகளை ஒதுக்க நீங்கள் நிகழ்வு பண்புக்கூறுகளைப் பயன்படுத்தலாம்.
எடுத்துக்காட்டு
பட்டன் உறுப்புக்கு onclick நிகழ்வை ஒதுக்கவும்:
<button onclick="displayDate()">Try it</button>மேலே உள்ள எடுத்துக்காட்டில், பட்டன் கிளிக் செய்யப்படும் போது displayDate என்ற செயல்பாடு இயக்கப்படும்.
HTML DOM பயன்படுத்தி நிகழ்வுகளை ஒதுக்குதல்
HTML DOM உங்களை JavaScript ஐப் பயன்படுத்தி HTML உறுப்புகளுக்கு நிகழ்வுகளை ஒதுக்க அனுமதிக்கிறது:
எடுத்துக்காட்டு
பட்டன் உறுப்புக்கு onclick நிகழ்வை ஒதுக்கவும்:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>மேலே உள்ள எடுத்துக்காட்டில், displayDate என்ற செயல்பாடு id="myBtn" உடன் HTML உறுப்புக்கு ஒதுக்கப்பட்டுள்ளது.
பட்டன் கிளிக் செய்யப்படும் போது செயல்பாடு இயக்கப்படும்.
onload மற்றும் onunload நிகழ்வுகள்
பயனர் பக்கத்திற்குள் நுழையும் அல்லது வெளியேறும் போது onload மற்றும் onunload நிகழ்வுகள் தூண்டப்படுகின்றன.
onload நிகழ்வை பார்வையாளரின் உலாவி வகை மற்றும் உலாவி பதிப்பை சரிபார்க்கவும், தகவலின் அடிப்படையில் வலைப்பக்கத்தின் சரியான பதிப்பை ஏற்றவும் பயன்படுத்தலாம்.
onload மற்றும் onunload நிகழ்வுகளை குக்கீகளைக் கையாள பயன்படுத்தலாம்.
எடுத்துக்காட்டு
<body onload="checkCookies()">oninput நிகழ்வு
பயனர் உள்ளீட்டுத் தரவை உள்ளிடும் போது oninput நிகழ்வு பெரும்பாலும் சில செயல்களுக்குப் பயன்படுத்தப்படுகிறது.
oninput ஐப் பயன்படுத்தி உள்ளீட்டுப் புலத்தின் உள்ளடக்கத்தை மாற்றுவது குறித்த எடுத்துக்காட்டு கீழே உள்ளது.
எடுத்துக்காட்டு
<input type="text" id="fname" oninput="upperCase()">onchange நிகழ்வு
onchange நிகழ்வு பெரும்பாலும் உள்ளீட்டுப் புலங்களின் சரிபார்ப்புடன் இணைந்து பயன்படுத்தப்படுகிறது.
onchange ஐப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு கீழே உள்ளது. பயனர் உள்ளீட்டுப் புலத்தின் உள்ளடக்கத்தை மாற்றும் போது upperCase() செயல்பாடு அழைக்கப்படும்.
எடுத்துக்காட்டு
<input type="text" id="fname" onchange="upperCase()">சுட்டி நிகழ்வுகள்
onmouseover மற்றும் onmouseout நிகழ்வுகள்:
பயனர் ஒரு HTML உறுப்பின் மேல் சுட்டியை நகர்த்தும் போது அல்லது வெளியேறும் போது ஒரு செயல்பாட்டைத் தூண்ட onmouseover மற்றும் onmouseout நிகழ்வுகளைப் பயன்படுத்தலாம்.
onmousedown, onmouseup மற்றும் onclick நிகழ்வுகள்:
onmousedown, onmouseup, மற்றும் onclick நிகழ்வுகள் அனைத்தும் சுட்டி-கிளிக்கின் பகுதிகளாகும். முதலில் சுட்டி-பட்டன் கிளிக் செய்யப்படும் போது, onmousedown நிகழ்வு தூண்டப்படுகிறது, பின்னர் சுட்டி-பட்டன் விடுவிக்கப்படும் போது, onmouseup நிகழ்வு தூண்டப்படுகிறது, இறுதியாக, சுட்டி-கிளிக் முடிந்ததும், onclick நிகழ்வு தூண்டப்படுகிறது.
மேலும் எடுத்துக்காட்டுகள்
onmousedown மற்றும் onmouseup
பயனர் சுட்டி பொத்தானை அழுத்தி வைத்திருக்கும் போது படத்தை மாற்றவும்.
onload
பக்கம் ஏற்றுதல் முடிந்ததும் எச்சரிக்கை பெட்டியைக் காண்பிக்கவும்.
onfocus
உள்ளீட்டுப் புலம் கவனம் பெறும் போது அதன் பின்புல-நிறத்தை மாற்றவும்.
சுட்டி நிகழ்வுகள்
கர்சர் ஒரு உறுப்பின் மேல் நகரும் போது அதன் நிறத்தை மாற்றவும்.
HTML DOM நிகழ்வு பொருள் குறிப்பு
அனைத்து HTML DOM நிகழ்வுகளின் பட்டியலுக்கு, எங்கள் முழுமையான HTML DOM நிகழ்வு பொருள் குறிப்பைப் பார்க்கவும்.
Jassif Team குறிப்பு:
HTML DOM நிகழ்வுகள் மற்றும் அவற்றின் பயன்பாடுகள் குறித்த விரிவான குறிப்புகளுக்கு எங்கள் ஆவணங்களைப் பார்க்கவும்.