onclick

Uruchamia kod JavaScript po kliknięciu elementu. Najprostszy, ale nie najlepszy sposób obsługi zdarzeń.

Dotyczy: Wszystkie elementy HTML

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Dostępne w kodzie atrybutu
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<button type="button" onclick="this.textContent = 'Zapisano na kurs'; this.disabled = true">
  Zapisz się na kurs HTML
</button>

<p>Kursy w koszyku: <strong id="cart">0</strong></p>
<button type="button" onclick="
  const cart = document.getElementById('cart');
  cart.textContent = Number(cart.textContent) + 1;
">Dodaj kurs do koszyka</button>

Podgląd

W pierwszym przycisku this wskazuje sam przycisk, więc kod zmienia jego napis i go wyłącza. Drugi przycisk znajduje licznik po id i zwiększa go przy każdym kliknięciu. Przejdź do przycisków klawiszem Tab i naciśnij Enter: to też jest kliknięcie.

Definicja i zastosowanie

Atrybut onclick zawiera kod JavaScript, który przeglądarka wykona po kliknięciu elementu. Zdarzenie click zachodzi nie tylko po kliknięciu myszą czy dotknięciu ekranu: przycisk wywołuje je też po naciśnięciu Enter lub Spacji, a link po naciśnięciu Enter. Na elemencie <button> obsłużysz więc jednym atrybutem mysz, dotyk i klawiaturę.

Przeglądarka opakowuje kod z atrybutu w funkcję z parametrem event. W środku masz więc do dyspozycji this, czyli element, na którym stoi atrybut, oraz event, czyli obiekt zdarzenia. event.target wskazuje element, w który faktycznie kliknięto. Może to być dziecko elementu z atrybutem, bo kliknięcie wędruje w górę drzewa (bubbling). Zwrócenie false anuluje domyślną akcję, tak samo jak event.preventDefault().

Atrybuty zdarzeń są wygodne w krótkich przykładach, ale w prawdziwych projektach lepiej używać w skrypcie metody addEventListener. HTML zostaje wtedy czysty, jeden element może mieć kilka funkcji obsługi, a strona działa także z restrykcyjną polityką bezpieczeństwa treści (CSP), która blokuje kod wpisany w atrybuty. Atrybut widzi przy tym tylko funkcje globalne, więc funkcji zadeklarowanej w <script type="module"> z niego nie wywołasz.

Uważaj też na nietypowy sposób wyszukiwania nazw. W kodzie atrybutu przeglądarka sprawdza najpierw właściwości samego elementu, potem formularza, do którego element należy, potem obiektu document, a dopiero na końcu zmienne globalne. Dlatego Twoja funkcja open() albo clear() wywołana z atrybutu się nie uruchomi. Zamiast niej zadziała document.open(), które czyści całą stronę, albo document.clear(), które nic nie robi.

Składnia

<element onclick="kod JavaScript">…</element>

Dostępne w kodzie atrybutu

this
Element, na którym stoi atrybut. Przez this zmienisz jego tekst, klasy albo atrybuty.
event
Obiekt zdarzenia. Przy kliknięciu zawiera m.in. położenie kursora (clientX, clientY) i informację, czy wciśnięto Shift albo Ctrl (shiftKey, ctrlKey).
event.target
Element, w który faktycznie kliknięto. Może to być dziecko elementu z atrybutem.
event.preventDefault()
Anuluje domyślną akcję, np. przejście pod adres linku albo zaznaczenie pola wyboru.
return false
W atrybucie działa jak event.preventDefault(). W funkcji dodanej przez addEventListener nie ma takiego efektu.

Zapis	Opis
this	Element, na którym stoi atrybut. Przez `this` zmienisz jego tekst, klasy albo atrybuty.
event	Obiekt zdarzenia. Przy kliknięciu zawiera m.in. położenie kursora (`clientX`, `clientY`) i informację, czy wciśnięto Shift albo Ctrl (`shiftKey`, `ctrlKey`).
event.target	Element, w który faktycznie kliknięto. Może to być dziecko elementu z atrybutem.
event.preventDefault()	Anuluje domyślną akcję, np. przejście pod adres linku albo zaznaczenie pola wyboru.
return false	W atrybucie działa jak `event.preventDefault()`. W funkcji dodanej przez `addEventListener` nie ma takiego efektu.

Więcej przykładów

Różnica między this a event.target

HTML

<ul onclick="
  document.getElementById('log').textContent =
    'this: ' + this.tagName + ', event.target: ' + event.target.tagName;
">
  <li>Lekcja 1: <strong>znaczniki</strong></li>
  <li>Lekcja 2: <em>atrybuty</em></li>
</ul>
<p id="log">Kliknij w listę, najlepiej w pogrubione albo pochylone słowo.</p>

Podgląd

Atrybut stoi na liście <ul>, więc this zawsze wskazuje listę. event.target to element, w który trafił kursor: LI, STRONG, EM, a czasem sama lista. Na tym opiera się delegowanie zdarzeń, czyli jedna funkcja obsługi dla wielu elementów.

To samo z addEventListener

HTML

<button type="button" id="enroll">Zapisz się na kurs HTML</button>

<script>
  const button = document.getElementById('enroll');

  button.addEventListener('click', (event) => {
    event.currentTarget.textContent = 'Zapisano na kurs';
    event.currentTarget.disabled = true;
  });
</script>

Podgląd

Tak obsługuje się zdarzenia w prawdziwych projektach. W funkcji strzałkowej this nie wskazuje elementu, dlatego zamiast niego używasz event.currentTarget.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Klikalny ma być <button> albo <a>, a nie <div> z atrybutem onclick. Na <div> nie przejdziesz klawiszem Tab, a czytnik ekranu nie powie, że da się go kliknąć.
W React zapis onClick={handleClick} tylko przypomina atrybut HTML. Przekazujesz w nim funkcję, a nie tekst z kodem, i to React dodaje nasłuchiwanie zdarzenia.
Nie wpisuj w atrybut długiego kodu. Jeśli potrzebujesz więcej niż jednej, dwóch instrukcji, przenieś go do funkcji w skrypcie, a najlepiej od razu do addEventListener.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs