Metodas addEventListener

Metodas addEventListener leidžia priskirti elementui įvykių tvarkytuvus. Su jo pagalba galima nurodyti, pavyzdžiui, ką daryti paspaudus mygtuką arba ką daryti renkant tekstą teksto laukelyje. Pirmame parametre nurodome perduodamo įvykio tipą, antrame - funkciją, kuri suveiks po įvykio, nurodyto pirmame parametre. Trečiame neprivalomame parametre perduodame objekto charakteristikas (once, capture, passive) arba parametrą useCapture.

Sintaksė

javascriptelementas.addEventListener('įvykio tipas', funkcija, [objekto charakteristikos]);
arba
elementas.addEventListener('įvykio tipas', funkcija, [useCapture]);

Pavyzdys

Padarykime taip, kad paspaudus mygtuką būtų išvestas pranešimas:

html<input type="button" id="button" value="spausk mane">

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

button.addEventListener('click', function() {
  alert('pranešimas');
});

Результат:

Pavyzdys

Parašykime kodą, kad praradus fokusą įvesties laukelyje būtų išvestas pranešimas su to įvesties laukelio tekstu:

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

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

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

Результат:

Pavyzdys

Padarykime taip, kad paspaudus mygtuką pranešimas būtų išvestas į konsolę tik vieną kartą. Tam pasinaudokime trečiuoju parametru:

html<input type="button" id="button" value="spausk mane">

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

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

Pavyzdys

Parametras passive draudžia iškviesti metodą event.preventDefault apdorojant įvykį. Pritaikykime ankstesniame pavyzdyje metodą event.preventDefault, taip pat nurodykime parametre passive reikšmę true:

html<input type="button" id="button" value="spausk mane">

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

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('Jokio pranešimo');
  },
  {
    passive: true
  }
);

Vykdant kodą pamatysime šiuos pranešimus:

javascript'Jokio pranešimo';
'Unable to preventDefault inside passive event listener invocation.'

Pavyzdys

Parametras useCapture su reikšme true rodo įvykių plitimą nuo vidinio elemento iki išorinio, su reikšme false - nuo išorinio iki vidinio elemento. Perduodant parametrą useCapture jo pavadinimas praleidžiamas ir rašomas tiesiog true arba false. Pažiūrėkime, kaip plinta įvykiai tėvinio ir dukterinio elementuose paspaudus juos:

html<div id="parent">Tėvinis
  <p id="child">Dukterinis</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('tėvinis'), 
  true
);
child.addEventListener('click',
  () => alert('dukterinis'), 
  true
);

Результат:

Taip pat žiūrėkite