addEventListener ක්‍රමය

addEventListener ක්‍රමය මඟින් අංගයකට සිදුවීම් හැසිරවීම් පැවරීමට ඉඩ සලසයි. එහි ආධාරයෙන්, උදාහරණයක් ලෙස, බොත්තමක් මත ක්ලික් කිරීමේදී හෝ පෙළ ක්ෂේත්‍රයක පා text ඇතුළත් කිරීමේදී කුමක් කළ යුතුද යන්න නිර්දේශ කළ හැකිය. පළමු පරාමිතියේදී අපි සිදුවීමේ වර්ගය නියම කරමු, දෙවන පරාමිතියේ - පළමු පරාමිතියේ නියම කරන ලද සිදුවීමෙන් පසු ක්‍රියාත්මක වන ශ්‍රිතය. තෙවන විකල්ප පරාමිතියේදී අපි වස්තුවේ ලක්ෂණ (once, capture, passive) හෝ useCapture පරාමිතිය සම්ප්‍රේෂණය කරමු.

වාග් රීතිය

javascriptඅංගය.addEventListener('සිදුවීමේ වර්ගය', ශ්‍රිතය, [වස්තුවේ ලක්ෂණ]);
හෝ
අංගය.addEventListener('සිදුවීමේ වර්ගය', ශ්‍රිතය, [useCapture]);

උදාහරණය

බොත්තම මත ක්ලික් කළ විට පණිවිඩයක් ප්‍රදර්ශනය වන පරිදි කරමු:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('message');
});

Результат:

උදාහරණය

ආදානයෙහි අවධානය අහිමි වූ විට එම ආදානයේ පෙළ සහිත පණිවිඩයක් ප්‍රදර්ශනය වන පරිදි කේතය ලියමු:

html<input id="input" value="text">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

උදාහරණය

බොත්තම මත ක්ලික් කළ විට පණිවිඩය කොන්සෝලයේ එක් වරක් පමණක් ප්‍රදර්ශනය වන පරිදි කරමු. මේ සඳහා අපි දෙවන පරාමිතිය භාවිතා කරමු:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function() {
    console.log('message');
  },
  {
    once: true
  }
);

උදාහරණය

passive පරාමිතිය සිදුවීමක් සැකසීමේදී event.preventDefault ක්‍රමය ක්‍රියා කිරීම වලක්වයි. පෙර උදාහරණයට අපි event.preventDefault ක්‍රමය යොදමු, තවද passive පරාමිතියේ අගය true ලෙස නියම කරමු:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('No message');
  },
  {
    passive: true
  }
);

කේතය ක්‍රියාත්මක කිරීමෙන් පසු අපි පහත පණිවිඩ දකිමු:

javascript'No message';
'Unable to preventDefault inside passive event listener invocation.'

උදාහරණය

useCapture පරාමිතිය true අගයෙන් අභ්‍යන්තර අංගයේ සිට පිටත අංගය දක්වා සිදුවීම් උත්ප්ලවනය පෙන්වයි, false අගයෙන් - පිටත අංගයේ සිට අභ්‍යන්තර අංගය දක්වා. useCapture පරාමිතිය සම්ප්‍රේෂණය කරන විට එහි නම අතහරිනු ලබන අතර සරලව true හෝ false ලෙස ලියනු ලැබේ. ඒවා මත ක්ලික් කළ විට මූලික හා උප අංගවල සිදුවීම් උත්ප්ලවනය වන ආකාරය බලමු:

html<div id="parent">Parent
  <p id="child">Child</p>
</div>

css#parent{
  width: 60px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}
#child{
  width: 60px;
  marging-right: 40px;
  border: 1px solid blue;
  text-align: center;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('parent'), 
  true
);
child.addEventListener('click',
  () => alert('child'), 
  true
);

Результат:

මේවාද බලන්න