Metode addEventListener

Metode addEventListener ļauj piešķirt elementam notikumu apstrādes funkcijas. Ar tās palīdzību var norādīt, piemēram, ko darīt, noklikšķinot uz pogas vai ko darīt, ierakstot tekstu teksta laukā. Pirmajā parametrā mēs norādām pārraidāmā notikuma veidu, otrajā - funkciju, kas darbosies pēc pirmajā parametrā norādītā notikuma. Trešajā neobligātajā parametrā mēs nododam objekta raksturojumus (once, capture, passive) vai parametru useCapture.

Sintakse

javascriptelement.addEventListener('notikuma veids', funkcija, [objekta raksturojumi]);
vai
element.addEventListener('notikuma veids', funkcija, [useCapture]);

Piemērs

Izveidosim tā, lai, noklikšķinot uz pogas, tiktu izvadīts ziņojums:

html<input type="button" id="button" value="noklikšķini uz manis">

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

button.addEventListener('click', function() {
  alert('ziņojums');
});

Результат:

Piemērs

Uzrakstīsim kodu, lai, zaudējot fokusu ievades laukā, tiktu izvadīts ziņojums ar šī ievades lauka tekstu:

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

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

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

Результат:

Piemērs

Izveidosim tā, lai, noklikšķinot uz pogas, ziņojums tiktu izvadīts konsolē tikai vienu reizi. Lai to izdarītu, izmantosim otro parametru:

html<input type="button" id="button" value="noklikšķini uz manis">

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

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

Piemērs

Parametrs passive aizliedz izsaukt metodi event.preventDefault, apstrādājot notikumu. Piemērosim iepriekšējā piemērā metodi event.preventDefault, kā arī norādīsim parametrā passive vērtību true:

html<input type="button" id="button" value="noklikšķini uz manis">

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

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('Nav ziņojuma');
  },
  {
    passive: true
  }
);

Pēc koda izpildes mēs redzēsim šādus ziņojumus:

javascript'Nav ziņojuma';
'Unable to preventDefault inside passive event listener invocation.'

Piemērs

Parametrs useCapture ar vērtību true parāda notikumu izplatīšanos no iekšējā elementa uz ārējo, bet ar vērtību false - no ārējā uz iekšējo elementu. Padodot parametru useCapture, tā vārds tiek izlaists un ierakstīts vienkārši true vai false. Apskatīsim, kā notikumi izplatās vecāka un pakārtotajos elementos, uz tiem noklikšķinot:

html<div id="parent">Vecāks
  <p id="child">Bērns</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('vecāks'), 
  true
);
child.addEventListener('click',
  () => alert('bērns'), 
  true
);

Результат:

Skatiet arī