Zdarzenia w JavaScript

Pora na kolejny bardzo ciekawy temat, dzisiaj opiszę Ci czym są zdarzenia w JavaScripcie. Przez ostatnie kilka artykułów pisałem Ci o tym czym jest DOM, jak pobierać, zmieniać czy dodawać elementy. Dzięki zdarzeniom będziemy mogli to wszystko połączyć w jedną całość. Zdarzenie to czynność, która ma miejsce w przeglądarce i została wywołana przez jakiś inny element na stronie lub przez użytkownika. W JavaScripcie mamy bardzo dużo różnych zdarzeń, w kolejnych artykułach postaram się przybliżyć może nie wszystkie, ale na pewno te najważniejsze.

Najpopularniejszym zdarzeniem, jest zdarzenie click, które wykonuje się po naciśnięciu przez użytkownika przycisku. Na pewno często wypełniałeś różne formularze na stronach internetowych, najczęściej pod spodem znajdował się przycisk zapisujący te dane. Zapisywanie danych, miało miejsce właśnie dzięki zdarzeniu click, które zaczęło się wykonywać po kliknięciu przez Ciebie przycisku. Inne popularne zdarzenia pod które możesz się podpiąć to mouseover, które jest wyzwalane gdy kursor myszy znajdzie się na elemencie, mouseout gdy mysz opuści ten element. Zdarzenie focus jest wyzwalane gdy aktywujesz jakieś pole tekstowe, load gdy obiekt zostanie załadowany, keydown i keyup które wyzwalają się kolejno gdy przycisk na klawiaturze zostanie naciśnięty oraz puszczony i wiele innych.

Przedstawię Ci na przykładzie jak podpiąć się pod zdarzenie click przycisku.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zdarzenia</title>
</head>
<body>

    <div id="container">
        <button id="zapisz">Zapisz</button>
    </div>

    <script src="js/skrypt.js"></script>
</body>
</html>

W kodzie znajduje się odniesienie do pliku skrypt.js, w nim będę umieszczał cały kod JS. Obecnie strona nie wygląda zbyt ładnie, ale wystarczy aby można było pokazać jak należy używać zdarzeń w JavaScript. Na stronie znajduje się zwykły przycisk z napisem Zapisz, będziemy chcieli aby po kliknięciu zmienił się tekst przycisku na Kliknięto!. Aby podpiąć się pod zdarzenie click tego przycisku, musisz wykonać 3 kroki: pobrać przycisk, zdefiniować funkcję która ma się wykonać po wyzwoleniu zdarzenia, oraz nasłuchiwać kliknięcia.

let btn = document.getElementById('zapisz');
let onClick = function () {
    btn.textContent = 'Kliknięto!';
};
btn.addEventListener('click', onClick);

Wykonaliśmy po kolei wszystkie 3 kroki, najpierw został pobrany i przypisany do zmiennej przycisk o id zapisz, następnie została zdefiniowana metoda, która będzie uruchamiana po wyzwoleniu zdarzenia oraz na końcu dzięki metodzie addEventListener podpieliśmy się pod zdarzenie click obiektu btn. Zauważ, że w metodzie addEventListener podpinana metoda została napisana bez nawiasów, jest to tak zwany callback, czyli metoda uruchamiano po wykonaniu jakieś czynności. Teraz klikając na przycisk zmienia się jego tekst, czyli dzieje się dokładnie to co chcieliśmy osiągnąć.

Zamiast definiowania w osobnej linii metody onClick, możemy użyć metody anonimowej i zdefiniować ją w następujący sposób:

let btn = document.getElementById('zapisz');
btn.addEventListener('click', function () {
    btn.textContent = 'Kliknięto!';
});

Oba zapisy działają dokładnie w taki sam sposób. Dodatkowo dobrą praktyką jest podpinanie się pod przycisk dopiero po załadowaniu całej strony, a można to robić podpinając się pod zdarzenie DOMContentLoaded. Które uruchamiane jest po załadowaniu się całej strony. Ostateczny zapis powinien wyglądać w ten sposób:

document.addEventListener('DOMContentLoaded', function(event) {
    let btn = document.getElementById('zapisz');
    btn.addEventListener('click', function () {
        btn.textContent = 'Kliknięto!';
    });
});

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Operacje na obiekcie DOM w JavaScript.
Następny artykuł - Zdarzenia na przykładzie prostego formularza w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły