Metoda addEventListener

Metoda addEventListener pozwala przypisać do elementu obsługę zdarzeń. Za jej pomocą można określić, na przykład, co zrobić po kliknięciu przycisku lub co zrobić podczas wpisywania tekstu w polu tekstowym. W pierwszym parametrze określamy typ zdarzenia, w drugim - funkcję, która będzie wywoływana po zdarzeniu określonym w pierwszym parametrze. W trzecim opcjonalnym parametrze przekazujemy charakterystyki obiektu (once, capture, passive) lub parametr useCapture.

Składnia

javascriptelement.addEventListener('typ zdarzenia', funkcja, [charakterystyki obiektu]);
lub
element.addEventListener('typ zdarzenia', funkcja, [useCapture]);

Przykład

Sprawmy, aby po kliknięciu przycisku wyświetlała się wiadomość:

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

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

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

Результат:

Przykład

Napiszmy kod, aby po utracie fokusu w polu input wyświetlała się wiadomość z tekstem z tego pola:

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

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

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

Результат:

Przykład

Sprawmy, aby po kliknięciu przycisku wiadomość wyświetlała się w konsoli tylko raz. W tym celu skorzystamy z drugiego parametru:

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

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

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

Przykład

Parametr passive zabrania wywoływania metody event.preventDefault podczas obsługi zdarzenia. Do poprzedniego przykładu zastosujmy metodę event.preventDefault, a także określmy w parametrze passive wartość 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 wykonaniu kodu zobaczymy następujące komunikaty:

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

Przykład

Parametr useCapture o wartości true pokazuje propagację zdarzeń od elementu wewnętrznego do zewnętrznego, przy wartości false - od zewnętrznego do wewnętrznego elementu. Podczas przekazywania parametru useCapture jego nazwa jest pomijana i zapisuje się po prostu true lub false. Zobaczmy jak propagują się zdarzenia w elemencie nadrzędnym i podrzędnym po kliknięciu na nie:

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

Результат:

Zobacz także