JavaScript Event Management

நிகழ்வு நிர்வாகம் பற்றி அறியவும்

JavaScript நிகழ்வு நிர்வாகம்

நிகழ்வு நிர்வாகம் என்பது நிகழ்வுகளைச் சேர்ப்பது, நீக்குவது மற்றும் கட்டுப்படுத்துவது பற்றியது.

நிகழ்வுகளைச் சேர்த்தல்

எடுத்துக்காட்டு

<button id="btn">Click</button>

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

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

// பட்டனுக்கு கிளிக் கேட்கச் செய்யவும்
btn.addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Clicked!";
}
</script>

💡 விளக்கம்:

addEventListener() முறை ஒரு HTML உறுப்புக்கு நிகழ்வு கேட்பவரைச் சேர்க்க பயன்படுகிறது. இந்த எடுத்துக்காட்டில், "btn" என்ற பட்டனில் கிளிக் நிகழ்வுக்கு ஒரு கேட்பவர் சேர்க்கப்பட்டுள்ளது.

நிகழ்வுகளை நீக்குதல்

எடுத்துக்காட்டு

<button id="add">Add</button>
<button id="remove">Remove</button>
<button id="test">Test click</button>

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

<script>
const test = document.getElementById("test");
const remove = document.getElementById("remove");
const add = document.getElementById("add");

function myFunction() {
   document.getElementById("demo").innerHTML += "Hello!";
}

// add பட்டனுக்கு கிளிக் கேட்கச் செய்யவும்
add.addEventListener("click", function () {
  // test பட்டனுக்கு கிளிக் கேட்கச் செய்யவும்
  test.addEventListener("click", myFunction);
});

// remove பட்டனுக்கு கிளிக் கேட்கச் செய்யவும்
remove.addEventListener("click", function () {
  // test பட்டனைக் கிளிக் கேட்க தடுக்கவும்
  test.removeEventListener("click", myFunction);
});
</script>

⚠️ குறிப்பு:

ஒரு நிகழ்வு கேட்பவரை நீக்க, நீங்கள் அதைச் சேர்க்க பயன்படுத்திய அதே பெயரிடப்பட்ட செயல்பாட்டைப் பயன்படுத்த வேண்டும்.

நிகழ்வுகளைத் தடுத்தல்

எடுத்துக்காட்டு

இயல்புநிலையைத் தடுத்தல் (ஒரு இணைப்பைத் தடுக்க)

<a href="https://www.jassifteam.com" id="link">Go to Jassif Team</a>

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

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

// இணைப்புக்கு கிளிக் கேட்கச் செய்யவும்
link.addEventListener("click", function (event) {
  event.preventDefault();
  document.getElementById("demo").innerHTML = "Link blocked!";
});
</script>

🛡️ preventDefault():

preventDefault() முறை ஒரு நிகழ்வின் இயல்புநிலை செயலைத் தடுக்கப் பயன்படுகிறது. எடுத்துக்காட்டாக, ஒரு இணைப்பைக் கிளிக் செய்யும்போது அது இயல்பாக புதிய பக்கத்திற்குச் செல்கிறது. preventDefault() இந்த இயல்புநிலை செயலைத் தடுக்கும்.

நிகழ்வு நிர்வாக பயிற்சி

ஒரு நிகழ்வு கேட்பவரை நீக்க சரியான முறை எது?

element.deleteEventListener("click", myFunction)
✗ தவறு! deleteEventListener என்பது சரியான முறை அல்ல
element.removeEvent("click", myFunction)
✗ தவறு! removeEvent என்பது சரியான முறை அல்ல
element.removeEventListener("click", myFunction)
✓ சரி! removeEventListener() முறை ஒரு நிகழ்வு கேட்பவரை நீக்க பயன்படுகிறது
element.detachEvent("click", myFunction)
✗ தவறு! detachEvent என்பது பழைய IE முறை, நவீன JavaScript இல் பயன்படுத்தப்படுவதில்லை