Metoda addEventListener

Metoda addEventListener lejon caktimin e përgjegjësve të ngjarjeve në një element. Me ndihmën e saj, mund të specifikoni, për shembull, çfarë të bëhet kur klikohet në një buton ose çfarë të bëhet kur shkruhet tekst në një fushë teksti. Në parametrin e parë specifikojmë llojin e ngjarjes së transmetuar, në të dytin - funksionin, i cili do të aktivizohet pas ngjarjes së specifikuar në parametrin e parë. Në parametrin e tretë jo të detyrueshëm kalojmë karakteristikat e objektit (once, capture, passive) ose parametrin useCapture.

Sintaksa

javascriptelement.addEventListener('lloji i ngjarjes', funksioni, [karakteristikat e objektit]);
ose
element.addEventListener('lloji i ngjarjes', funksioni, [useCapture]);

Shembull

Le ta bëjmë që kur klikohet në një buton të shfaqet një mesazh:

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

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

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

Результат:

Shembull

Le të shkruajmë kodin, që kur humbet fokusi në input të shfaqet një mesazh me tekstin e atij inputi:

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

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

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

Результат:

Shembull

Le ta bëjmë që kur klikohet në buton mesazhi të shfaqet në konsol vetëm një herë. Për këtë do të përdorim parametrin e dytë:

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

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

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

Shembull

Parametri passive ndalon thirrjen e metodës event.preventDefault gjatë përpunimit të ngjarjes. Le të aplikojmë metodën event.preventDefault në shembullin e mëparshëm, dhe gjithashtu të specifikojmë në parametrin passive vlerën 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
  }
);

Pas ekzekutimit të kodit do të shohim mesazhet e mëposhtme:

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

Shembull

Parametri useCapture me vlerë true tregon shpërthimin e ngjarjeve nga elementi i brendshëm tek i jashtëm, me vlerën false - nga i jashtëmi tek elementi i brendshëm. Kur transmetohet parametri useCapture emri i tij hiqet dhe shkruhet thjesht true ose false. Le të shohim se si shpërthejnë ngjarjet në elementin prind dhe tek fëmija kur klikohet në to:

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
);

Результат:

Shihni gjithashtu