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() இந்த இயல்புநிலை செயலைத் தடுக்கும்.