Metóda addEventListener

Metóda addEventListener umožňuje priradiť prvku obslužné funkcie udalostí. S jej pomocou môžete určiť, napríklad, čo sa má robiť pri kliknutí na tlačidlo alebo čo sa má robiť pri písaní textu do textového poľa. V prvom parametri špecifikujeme typ udalosti, v druhom - funkciu, ktorá sa spustí po udalosti špecifikovanej v prvom parametri. V treťom voliteľnom parametri odovzdávame charakteristiky objektu (once, capture, passive) alebo parameter useCapture.

Syntax

javascriptprvok.addEventListener('typ udalosti', funkcia, [charakteristiky objektu]);
alebo
prvok.addEventListener('typ udalosti', funkcia, [useCapture]);

Príklad

Poďme urobiť to, aby sa po kliknutí na tlačidlo zobrazila správa:

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

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

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

Результат:

Príklad

Poďme napísať kód, aby sa po strate fokusu v inpute zobrazila správa s textom tohto inputu:

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

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

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

Результат:

Príklad

Poďme urobiť to, aby sa po kliknutí na tlačidlo správa vypísala do konzoly iba raz. Na to využijeme tretí parameter:

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

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

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

Príklad

Parameter passive zakazuje volať metódu event.preventDefault pri spracovaní udalosti. Poďme k predchádzajúcemu príkladu aplikovať metódu event.preventDefault, a tiež špecifikujme v parametri passive hodnotu 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
  }
);

Po vykonaní kódu uvidíme nasledujúce správy:

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

Príklad

Parameter useCapture s hodnotou true zobrazuje bublanie udalostí od vnútorného prvku k vonkajšiemu, pri hodnote false - od vonkajšieho k vnútornému prvku. Pri odovzdávaní parametra useCapture sa jeho názov vynecháva a zapíše sa jednoducho true alebo false. Poďme sa pozrieť, ako bublajú udalosti v nadradenom a podriadenom prvku po kliknutí na ne:

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

Результат:

Pozri tiež