[JavaScript] Zdarzenia na elementach czyli addEventListener

W tym wpisie zajmiemy się obsługą zdarzeń na elementach przy użyciu metody addEventListener. Metoda ta rejestruje słuchacza zdarzeń dla określonego typu zdarzenia. Czyli przykładowo możemy zarejestrować zdarzenie dla zdarzenia typu load i będziemy mieli dostęp do elementów dokumentu. Za pewne do tej pory robiłeś to z wykorzystaniem uchwytu dla danego zdarzenia, np. window.onload = function() {alert('Załadowana');};. Używanie addEventListener jest dużo wygodniejsze, a kod staje się bardziej przejrzysty. Metoda addEventListener przyjmuje 3 argumenty: typ zdarzenia, słuchacza i 3 to wartość logiczna true lub false. True, jeśli użytkownik chce przechwytywać zdarzenia.

addEventListener - przykładowe użycie

Przykładowe użycie metody może wyglądać tak: window.addEventListener("DOMContentLoaded", showAlert, false); . Zarejestrowaliśmy słuchacza showAlert dla zdarzenia DOMContentLoaded na elemencie window. Załóżmy, że funkcja showAlert ma za zadanie wyrzucić jakiś alert. Stanie się to wtedy gdy całe drzewo DOM się w pełni załaduje. Czyli w tym przykładzie jak wejdziemy na stronę, po załądowaniu się jej zostanie wykonana funkcja showAlert.

Przy tworzeniu skryptów w JavaScript często używa się metody addEventListener, szczególnie jeśli nie korzystamy z gotowych bibliotekk typu jQuery.

Przykłady użycia addEventListener

Załóżmy, że chcemy dostać się do jakiegoś elementu na stronie, niech to będzie np. div o id test-div. Teraz spróbujmy go pobrać: var testDiv = document.getElementById('test-div'); i co? No właśnie i nic. Jeśli taki fragment umieścimy w bloku >script^lt; to nic się nie stanie, czyli metoda getElementById nie zwróci nam obiektu z naszym divem, ponieważ JS go nie widzi. Musimy zarejestrować słuchacza zdarzenia onload dla elementu window.Czyli rejestrujemy: window.addEventListener("load", getDiv, false);. Zarejestrowano getDiv dla zdarzenia load na elemencie window. To wszystko, od teraz będzie można odwoływać się do elementów dokumentu np. poprzez getElementById.

Teraz inny przykład. Stwórzmy sobie loader strony, czyli animacje pokazywaną 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.top=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, false);
window.addEventListener("load", hideLoader, false);

Powyższy kod wyświetli na czas ładowania strony div z animacją ładowania. Po załadowaniu drzewa DOM animacja ładowania zniknie.

Komentarze

Popular

[HTML] Jak wstawić obrazek?

[PHP|HTML] Odświeżenie strony

[HTML] Jak wycentrować stronę?