Metoda addEventListener

Metoda addEventListener umožňuje přiřadit prvku obslužné rutiny událostí. S její pomocí lze například určit, co dělat při kliknutí na tlačítko nebo co dělat při psaní textu do textového pole. V prvním parametru určujeme typ předávané události, ve druhém - funkci, která se spustí po události uvedené v prvním parametru. Ve třetím volitelném parametru předáváme charakteristiky objektu (once, capture, passive) nebo parametr useCapture.

Syntaxe

javascriptprvek.addEventListener('typ události', funkce, [charakteristiky objektu]);
nebo
prvek.addEventListener('typ události', funkce, [useCapture]);

Příklad

Udělejme to, aby po kliknutí na tlačítko bylo vypsáno zpráva:

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

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

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

Результат:

Příklad

Napišme kód, aby při ztrátě fokusu v inputu byla vypsána zpráva s textem tohoto inputu:

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

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

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

Результат:

Příklad

Udělejme to, aby po kliknutí na tlačítko byla zpráva vypsána do konzole pouze jednou. K tomu využijeme druhý parametr:

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

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

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

Příklad

Parametr passive zakazuje volat metodu event.preventDefault při zpracování události. Použijme na předchozí příklad metodu event.preventDefault a také určeme v parametru 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 provedení kódu uvidíme následující zprávy:

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

Příklad

Parametr useCapture s hodnotou true ukazuje probublávání událostí od vnitřního prvku k vnějšímu, při hodnotě false - od vnějšího k vnitřnímu prvku. Při předávání parametru useCapture se jeho název vynechává a zapisuje se prostě true nebo false. Podívejme se, jak probublávají události v nadřazeném a podřízeném prvku při kliknutí na ně:

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

Результат:

Viz také