[JavaScript] Zdarzenia na elementach czyli addEventListener

W tym wpisie zajmiemy się obsługą zdarzeń na elementach przy użyciu metody addEventListener. Metoda ta rejestruje obsługę zdarzenia dla określonego elementu, czyli np. można zarejestrować zdarzenie DOMContentLoaded dla listenera, który ma mieć dostęp do drzewa DOM. Być może do tej pory, gdy zaszła potrzeba wywołać jakąś funkcję poprzez zdarzenia, robiłeś/-aś to z wykorzystaniem uchwytu dla danego zdarzenia, np. window.onload = function() {alert('Załadowana');}; lub poprzez atrybuty zdarzeń w HTML. Używanie addEventListener jest dużo wygodniejsze, kod staje się bardziej przejrzysty i nie ma potrzeby używania atrybutów typu onclick w kodzie HTML. Metoda addEventListener przyjmuje 3 argumenty, ale nas interesują dwa pierwsze:

  • (string) eventType - typ zdarzenia;
  • (object) listener - funkcja callback, która ma zostać wywołana;

Przykład 1

function showAlert() {

alert('Hello World!');

}

Window.addEventListener('DOMContentLoaded', showAlert);

W powyższym przykładzie zarejestrowana została obsługa zdarzenia DOMContentLoaded dla elementu Window. Funkcja showAlert zostanie wywołana po załadowaniu drzewa DOM.

Przykład 2

Załóżmy, że chcemy operować na jakimkolwiek elemencie HTML na stronie, niech to będzie np. div o ID test-div. Teraz spróbujmy go pobrać bezpośrednio:

var testDiv = document.getElementById('test-div');

alert(testDiv);

W powyższym przykładzie metoda alert nie wyświetli obiektu testDiv, ponieważ jest on niewidoczny dla JS. Musimy zarejestrować obsługę zdarzenia load dla elementu Window, czyli:

function getDiv() {

var testDiv = document.getElementById('test-div');

alert(testDiv);

}

Window.addEventListener('load', getDiv);

Przykład 3

Teraz inny przykład. Stworzymy loader strony, czyli jakąś animacje wyświetlaną do momentu załadowania się drzewa DOM:

function showLoader() {
 
var loaderOverlay = document.getElementById('loader-overlay');
var loaderAnimation = document.createElement('div');
 
var topMargin = (window.innerHeight - 128) / 2;
var leftMargin = (window.innerWidth - 128) / 2;
 
loaderOverlay.style.zIndex = '9998;
loaderOverlay.style.position = 'fixed';
loaderOverlay.style.top = 0;
loaderOverlay.style.left = 0;
loaderOverlay.style.backgroundColor = 'rgba(249,249,249, 0.8)';
loaderOverlay.style.width = '100%';
loaderOverlay.style.height = '100%';
 
loaderAnimation.style.zIndex = 9999;
loaderAnimation.style.position = 'fixed';
loaderAnimation.style.position = topMargin + 'px';
loaderAnimation.style.left = leftMargin + 'px';
loaderAnimation.style.backgroundImage = 'url(/images/page-loader.gif);
loaderAnimation.style.width = '128px';
loaderAnimation.style.height = '128px';

loaderOverlay.appendChild(loaderAnimation);

document.body.appendChild(loaderOverlay);
 
}

function hideLoader() {

var loaderOverlay = document.getElementById('loader-overlay');

document.body.removeChild(loaderOverlay);
 
}

Window.addEventListener('DOMContentLoaded', showLoader);
Window.addEventListener('load', hideLoader);

Powyższy kod wyświetli na czas ładowania strony element div z animacją. Po załadowaniu drzewa DOM animacja ładowania zniknie - element loaderOverlay zostanie usunięty.

W powyższym przykładzie powinna zostać użyta grafika o rozmiarach 128px, aby była ona widoczna po środku strony. Ewentualnie można zmienić podane wartości width i height według swojej grafiki. Ścieżkę do pliku z grafiką oczywiście też trzeba odpowiednio zmienić.

Komentarze

Popular

[HTML] Jak wstawić obrazek?

[C++] Jak obliczyć pole i obwód trapezu?

[PHP] Jak pobrać adres strony?