Blokowanie domyślnej akcji zdarzenia w JavaScript

Dzisiaj opiszę Ci jak blokować domyślną akcję zdarzenia w JavaScript. Możliwe, że zastanawiasz się o co chodzi, jak to blokować domyślną akcję zdarzenia? Musisz wiedzieć że niektóre elementy mają jakieś swoje domyślne akcje zdarzeniowe, które nie zawsze chcemy aby się wykonywały.

Przedstawię Ci to na przykładzie formularza, przygotujmy zatem najprostszy formularz, który będzie się składał z 1 labela, 1 inputa oraz 1 buttona.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Blokowanie domyślnej akcji zdarzenia</title>
</head>
<body>

    <form id="exampleForm">
        <label>Imię:</label>
        <input type="text" id="name">
        <button id="send">Wyślij</button>
    </form>

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

Spróbuj wpisać jakąś wartość do input'a, a następnie kliknij przycisk wyślij. Czy zauważyłeś co się stało? Mimo, że nie zaprogramowaliśmy przycisku wyślij i tak ma on swoją domyślną akcję. Dzieje się tak ponieważ jest to formularz, więc button próbuje wysłać wpisane dane.

Powiedzmy, że nie chcemy aby przycisk wysyłał dane formularza, a zamiast tego chcemy aby po kliknięciu wyślij wyświetlał się tylko komunikat. Ok, wydaje się to proste zadanie, spróbujmy zatem podpiąć się pod zdarzenie click i wyświetlać komunikat. Twój skrypt może wyglądać w ten sposób:

document.addEventListener('DOMContentLoaded', function(event) {
    let btn = document.getElementById('send');
        
    btn.addEventListener('click', function(){
        let name = document.getElementById('name').value;
        alert(`Cześć ${name}!`);
    });
});

Spróbuj teraz przetestować i zobacz co się dzieje. I co dalej nie działa tak jakbyśmy tego chcieli? Niby komunikat się wyświetla, ale formularz ciągle jest wysyłany, a chcieliśmy aby tylko wyświetlał się komunikat. Tutaj z pomocą przychodzi nam metoda preventDefault.

document.addEventListener('DOMContentLoaded', function(event) {
    let btn = document.getElementById('send');

    btn.addEventListener('click', function(e){
        e.preventDefault();
        let name = document.getElementById('name').value;
        alert(`Cześć ${name}!`);
    });
});

Metoda preventDefault blokuje domyślną akcję zdarzenia, dzięki czemu możemy dodać swoje własne zdarzenie. Jak widzisz funkcja przyjmuje parametr e i to właśnie na tym parametrze jest wykonywana ta metoda. Jeśli przetestujesz powyższy przykład to zobaczysz, że dzięki tej metodzie osiągnęliśmy nasz zamierzony od początku cel. Teraz po kliknięciu w przycisk wyślij, wyświetla się tylko komunikat.

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ł - Zdarzenia na przykładzie prostego formularza w JavaScript.
Następny artykuł - Okna dialogowe w JavaScript.

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

Blokowanie domyślnej akcji zdarzenia w JavaScript

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły