Jassif Team Institution

addEventListener() முறை

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

பயனர் ஒரு பட்டனைக் கிளிக் செய்யும் போது தீப்பற்றும் நிகழ்வு கேட்பவரைச் சேர்க்கவும்:

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() முறை குறிப்பிடப்பட்ட உறுப்புக்கு ஒரு நிகழ்வு கையாளியை இணைக்கிறது.

addEventListener() முறை இருக்கும் நிகழ்வு கையாளிகளை மேலெழுதாமல் ஒரு உறுப்புக்கு நிகழ்வு கையாளியை இணைக்கிறது.

தொடரியல்

element.addEventListener(event, function, useCapture);

• முதல் அளவுரு நிகழ்வின் வகை (எ.கா. "click" அல்லது "mousedown" அல்லது வேறு எந்த HTML DOM நிகழ்வு)
• இரண்டாவது அளவுரு நிகழ்வு ஏற்படும் போது நாம் அழைக்க விரும்பும் செயல்பாடு
• மூன்றாவது அளவுரு நிகழ்வு பகிர்ந்தளிப்பு அல்லது நிகழ்வு பிடிப்பு பயன்படுத்த வேண்டுமா என்பதைக் குறிப்பிடும் பூலியன் மதிப்பு. இந்த அளவுரு விருப்பமானது.

உறுப்புக்கு நிகழ்வு கையாளியைச் சேர்த்தல்

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

பயனர் ஒரு உறுப்பைக் கிளிக் செய்யும் போது "Hello World!" எச்சரிக்கையைக் காண்பிக்கவும்:

element.addEventListener("click", function(){ alert("Hello World!"); });

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

வெளிப்புற "பெயரிடப்பட்ட" செயல்பாட்டைக் குறிப்பிடலாம்:

element.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

ஒரே உறுப்புக்கு பல நிகழ்வு கையாளிகளைச் சேர்த்தல்

addEventListener() முறை இருக்கும் நிகழ்வுகளை மேலெழுதாமல் ஒரே உறுப்புக்கு பல நிகழ்வுகளைச் சேர்க்க உங்களை அனுமதிக்கிறது:

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

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

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

வெவ்வேறு வகையான நிகழ்வுகளை ஒரே உறுப்புக்குச் சேர்க்கலாம்:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

சாளர பொருளுக்கு நிகழ்வு கையாளியைச் சேர்த்தல்

addEventListener() முறை HTML உறுப்புகள், HTML ஆவணம், சாளர பொருள் அல்லது xmlHttpRequest பொருள் போன்ற நிகழ்வுகளை ஆதரிக்கும் பிற பொருட்கள் போன்ற எந்த HTML DOM பொருளிலும் நிகழ்வு கேட்பவர்களைச் சேர்க்க உங்களை அனுமதிக்கிறது.

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

பயனர் சாளரத்தின் அளவை மாற்றும் போது தீப்பற்றும் நிகழ்வு கேட்பவரைச் சேர்க்கவும்:

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

அளவுருக்களை அனுப்புதல்

அளவுரு மதிப்புகளை அனுப்பும் போது, அளவுருக்களுடன் குறிப்பிடப்பட்ட செயல்பாட்டை அழைக்கும் "அநாமதேய செயல்பாட்டை"ப் பயன்படுத்தவும்:

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

element.addEventListener("click", function(){ myFunction(p1, p2); });

நிகழ்வு பகிர்ந்தளிப்பா அல்லது நிகழ்வு பிடிப்பா?

HTML DOM இல் நிகழ்வு பரவலுக்கு இரண்டு வழிகள் உள்ளன: பகிர்ந்தளிப்பு மற்றும் பிடிப்பு.

நிகழ்வு பரவல் என்பது ஒரு நிகழ்வு ஏற்படும் போது உறுப்பு வரிசையை வரையறுக்கும் ஒரு வழியாகும். உங்களிடம் <div> உறுப்புக்குள் <p> உறுப்பு இருந்தால், பயனர் <p> உறுப்பைக் கிளிக் செய்தால், எந்த உறுப்பின் "கிளிக்" நிகழ்வு முதலில் கையாளப்பட வேண்டும்?

addEventListener() முறையுடன், "useCapture" அளவுருவைப் பயன்படுத்தி பரவல் வகையைக் குறிப்பிடலாம்:

addEventListener(event, function, useCapture);

இயல்புநிலை மதிப்பு false, இது பகிர்ந்தளிப்பு பரவலைப் பயன்படுத்தும். மதிப்பு true ஆக அமைக்கப்படும் போது, நிகழ்வு பிடிப்பு பரவலைப் பயன்படுத்துகிறது.

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

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() முறை

removeEventListener() முறை addEventListener() முறையுடன் இணைக்கப்பட்ட நிகழ்வு கையாளிகளை நீக்குகிறது:

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

element.removeEventListener("mousemove", myFunction);

HTML DOM நிகழ்வு பொருள் குறிப்பு

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

EventListener பயிற்சி