Zdarzenia myszy i klawiatury

<button onclick="powitaj('atrybut')">1. atrybut onclick</button>
<button id="b2">2. właściwość onclick</button>
<button id="b3">3. addEventListener</button>
<p id="wynik">Kliknij dowolny przycisk.</p>

function powitaj(sposob) {
  document.getElementById('wynik').textContent = 'Zadziałał sposób: ' + sposob;
}

// 2. właściwość elementu – przypisujesz FUNKCJĘ (bez nawiasów)
document.getElementById('b2').onclick = function () {
  powitaj('właściwość');
};

// 3. addEventListener – nazwa zdarzenia BEZ „on” + funkcja
document.getElementById('b3').addEventListener('click', () => {
  powitaj('addEventListener');
});

<button class="opcja">Mały</button>
<button class="opcja">Średni</button>
<button class="opcja">Duży</button>
<p id="info">Kliknij rozmiar.</p>

function wybierz(event) {
  console.log(event.type);                 // click
  console.log(event.target.tagName);       // BUTTON
  document.getElementById('info').textContent =
    'Wybrano: ' + event.target.textContent + ' (x=' + event.clientX + ')';
}

// jedna funkcja dla trzech przycisków – event.target mówi, który kliknięto
document.querySelectorAll('.opcja').forEach((btn) => btn.addEventListener('click', wybierz));

<button onclick="zaznacz(this)">Baza</button>
<button onclick="zaznacz(this)">Opisy</button>
<button onclick="zaznacz(this)">Galeria</button>

button { background: #ffaea5; border: 0; padding: 8px 16px; margin-right: 6px; }

function zaznacz(klikniety) {
  const przyciski = document.getElementsByTagName('button');
  for (let i = 0; i < przyciski.length; i++) {
    przyciski[i].style.backgroundColor = '#FFAEA5';  // wszystkie: kolor nieaktywny
  }
  klikniety.style.backgroundColor = 'MistyRose';    // tylko kliknięty: aktywny
}

<div id="karta">Najedź na mnie, kliknij, kliknij dwa razy.</div>
<p id="log"></p>

#karta { padding: 20px; background: #eee; border: 2px solid #999; user-select: none; }

const karta = document.getElementById('karta');
const log = document.getElementById('log');

karta.addEventListener('mouseover', () => { karta.style.background = 'lightyellow'; });
karta.addEventListener('mouseout', () => { karta.style.background = '#eee'; });
karta.addEventListener('click', () => { log.textContent = 'Kliknięcie'; });
karta.addEventListener('dblclick', () => { log.textContent = 'Podwójne kliknięcie!'; });
karta.addEventListener('contextmenu', (e) => {
  e.preventDefault();                       // bez menu przeglądarki
  log.textContent = 'Prawy przycisk – menu zablokowane';
});

<input id="pole" placeholder="Pisz tutaj i naciśnij Enter">
<p id="klawisz">Ostatni klawisz: –</p>
<p id="licznik">Naciśnięć: 0</p>
<p id="wynik"></p>

const pole = document.getElementById('pole');
let nacisniec = 0;

pole.addEventListener('keydown', (event) => {
  nacisniec++;
  document.getElementById('klawisz').textContent = 'Ostatni klawisz: ' + event.key + ' (code: ' + event.code + ')';
  document.getElementById('licznik').textContent = 'Naciśnięć: ' + nacisniec;

  if (event.key === 'Enter') {
    document.getElementById('wynik').textContent = 'Wysłano: ' + pole.value;
    pole.value = '';
  }
  if (event.key === 'Escape') pole.value = '';
});

<input id="imie" placeholder="Imię">
<select id="rozmiar">
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
</select>
<label><input type="checkbox" id="zgoda"> Zgoda</label>
<p id="log">–</p>

const log = document.getElementById('log');
const imie = document.getElementById('imie');

imie.addEventListener('focus', () => { imie.style.background = 'lightyellow'; });
imie.addEventListener('blur', () => {
  imie.style.background = '';
  log.textContent = 'Opuszczono pole, wpisano: ' + imie.value;
});
imie.addEventListener('input', () => {
  log.textContent = 'Piszesz… znaków: ' + imie.value.length;
});
document.getElementById('rozmiar').addEventListener('change', (e) => {
  log.textContent = 'Rozmiar: ' + e.target.value;
});
document.getElementById('zgoda').addEventListener('change', (e) => {
  log.textContent = 'Zgoda: ' + e.target.checked;
});

<form id="f">
  <input id="email" placeholder="e-mail" required>
  <button type="submit">Wyślij</button>
</form>
<p id="komunikat"></p>

document.getElementById('f').addEventListener('submit', (event) => {
  event.preventDefault();                  // nie wysyłaj, nie przeładowuj strony
  const email = document.getElementById('email').value;
  document.getElementById('komunikat').textContent = email.includes('@')
    ? 'Dziękujemy, ' + email
    : 'Podaj poprawny adres.';
});

<p id="p1">Akapit testowy</p>
<button id="ustaw">Ustaw czerwony</button>
<button id="przelacz">Przełącz czerwony/niebieski</button>
<button id="pokazUkryj">Pokaż/ukryj</button>
<p id="licznik">Kliknięć: 0</p>

const p1 = document.getElementById('p1');
let liczbaKlikniec = 0;

document.getElementById('ustaw').addEventListener('click', () => {
  p1.style.color = 'red';                                 // zawsze to samo
});

// sposób 1: sprawdź aktualną wartość w DOM
document.getElementById('przelacz').addEventListener('click', () => {
  p1.style.color = p1.style.color === 'red' ? 'blue' : 'red';
});

// sposób 2: zmienna stanu poza funkcją
let widoczny = true;
document.getElementById('pokazUkryj').addEventListener('click', () => {
  widoczny = !widoczny;
  p1.style.display = widoczny ? 'block' : 'none';
  liczbaKlikniec++;
  document.getElementById('licznik').textContent = 'Kliknięć: ' + liczbaKlikniec;
});