Jassif Team Institution

HTML நிகழ்வுகள்

HTML நிகழ்வுகள் என்பது HTML உறுப்புகளுக்கு நடக்கும் விஷயங்களாகும்.

நிகழ்வுகளின் எடுத்துக்காட்டுகள்:

• ஒரு HTML பொத்தான் கிளிக் செய்யப்படுகிறது
• வலைப்பக்கம் ஏற்றுதல் முடிந்தது
• சுட்டி ஒரு உறுப்பின் மேல் நகரும்
• ஒரு விசைப்பலகை விசை அழுத்தப்படுகிறது
• ஒரு HTML உள்ளீட்டுப் புலம் மாற்றப்படுகிறது

HTML DOM, JavaScript க்கு HTML நிகழ்வுகளுக்கு எதிர்வினையாற்ற அனுமதிக்கிறது:

JavaScript நிகழ்வுகள்

பெரும்பாலும், நிகழ்வுகள் நடக்கும்போது, நீங்கள் ஏதாவது செய்ய விரும்பலாம்.

JavaScript HTML பக்கங்களில் பயன்படுத்தப்படும்போது, JavaScript நிகழ்வுகளுக்கு எதிர்வினையாற்ற முடியும்.

நிகழ்வுகள் கண்டறியப்படும் போது குறியீட்டை இயக்க JavaScript உங்களை அனுமதிக்கிறது.

HTML, JavaScript குறியீட்டுடன் நிகழ்வு கையாளுநர் பண்புக்கூறுகளை HTML உறுப்புகளில் சேர்க்க அனுமதிக்கிறது.

தொடரியல்

ஒற்றை மேற்கோள்களுடன்:

<element event='some JavaScript'>

இரட்டை மேற்கோள்களுடன்:

<element event="some JavaScript">

பின்வரும் எடுத்துக்காட்டில், onclick பண்புக்கூறு (குறியீட்டுடன்) ஒரு <button> உறுப்பில் சேர்க்கப்பட்டுள்ளது:

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

மேலே உள்ள எடுத்துக்காட்டில், JavaScript குறியீடு id="demo" உடன் உறுப்பின் உள்ளடக்கத்தை மாற்றுகிறது.

அடுத்த எடுத்துக்காட்டில், குறியீடு this.innerHTML ஐப் பயன்படுத்தி அதன் சொந்த உறுப்பின் உள்ளடக்கத்தை மாற்றுகிறது:

<button onclick="this.innerHTML = Date()">The time is?</button>

JavaScript செயல்பாட்டை அழைத்தல்

JavaScript குறியீடு பெரும்பாலும் பல வரிகளாக நீண்டதாக இருக்கலாம்.

செயல்பாடுகளை அழைக்க நிகழ்வு பண்புக்கூறைப் பயன்படுத்துவது மிகவும் பொதுவானது:

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

பொதுவான HTML நிகழ்வுகள்

சில பொதுவான HTML நிகழ்வுகளின் பட்டியல் இங்கே:

ஊடாடும் நிகழ்வு ஆர்ப்பாட்டம்

JavaScript நிகழ்வு கையாளுநர்கள்

ஒரு நிகழ்வு கையாளுநர் என்பது ஒரு நிகழ்வு நடக்கும் போது இயங்கும் JavaScript குறியீடாகும்.

நிகழ்வு கையாளுநர்களை பயனர் உள்ளீடு, பயனர் செயல்கள் மற்றும் உலாவி செயல்களைக் கையாளவும் சரிபார்க்கவும் பயன்படுத்தலாம்:

• ஒவ்வொரு முறையும் ஒரு பக்கம் ஏற்றப்படும் போது செய்யப்பட வேண்டிய விஷயங்கள்
• பக்கம் மூடப்படும் போது செய்யப்பட வேண்டிய விஷயங்கள்
• பயனர் ஒரு பொத்தானைக் கிளிக் செய்யும் போது செய்யப்பட வேண்டிய செயல்
• பயனர் தரவை உள்ளிடும் போது சரிபார்க்கப்பட வேண்டிய உள்ளடக்கம்
• மேலும் பல ...

JavaScript நிகழ்வுகளுடன் வேலை செய்ய பல்வேறு முறைகளைப் பயன்படுத்தலாம்:

• HTML நிகழ்வு பண்புக்கூறுகள் JavaScript குறியீட்டை நேரடியாக இயக்க முடியும்
• HTML நிகழ்வு பண்புக்கூறுகள் JavaScript செயல்பாடுகளை அழைக்க முடியும்
• உங்கள் சொந்த நிகழ்வு கையாளுநர் செயல்பாடுகளை HTML உறுப்புகளுக்கு ஒதுக்கலாம்
• நிகழ்வுகள் அனுப்பப்படுவதை அல்லது கையாளப்படுவதைத் தடுக்கலாம்
• மேலும் பல ...

ஒரு நிகழ்வு கேட்பியைப் பயன்படுத்துதல்

onclick போன்ற நிகழ்வு பண்புக்கூறுகளைப் பயன்படுத்துவது எளிதானது.

எவ்வாறாயினும், நிகழ்வுகளைக் கையாள addEventListener() ஐப் பயன்படுத்துவது பரிந்துரைக்கப்படும் வழியாகும்.

பரிந்துரைக்கப்படவில்லை

onclick பண்புக்கூறைப் பயன்படுத்துதல்:

<button onclick="displayDate()">Time is?</button>

<p id="demo"></p>

<script>
// Function to displat date
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

addEventListener() முறை HTML மற்றும் JavaScript ஐ பிரிக்கிறது.

மிகவும் பரிந்துரைக்கப்படுகிறது

addEventListener() முறையைப் பயன்படுத்துதல்:

<button id="myBtn">Click me</button>

<p id="demo"></p>

<script>
const btn = document.getElementById("myBtn");

// Add EventListener to btn
btn.addEventListener("click", function () {
  document.getElementById("demo").innerHTML = Date();
});
</script>

நிகழ்வு கேட்பி vs நிகழ்வு பண்புக்கூறு

பயிற்சி