Zdarzenia klawiatury i myszy
Proszę obsługiwać kliknięcia, naciśnięcia klawiszy i zdarzenia wskaźnika.
Zdarzenia klawiatury i myszy to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Rodziny zdarzeń wejściowych
Zdarzenia myszy i klawiatury pozwalają tworzyć rozbudowane interakcje. Każda rodzina obejmuje wyspecjalizowane typy zdarzeń i właściwości.
Zdarzenie click
click jest wywoływane po naciśnięciu i zwolnieniu głównego przycisku. Jest również wywoływane podczas aktywacji przycisków i odsyłaczy za pomocą klawiatury, dzięki czemu interakcja jest dostępna.
btn.addEventListener("click", () => {
console.log("activated");
});dblclick i contextmenu
dblclick jest wywoływane po dwukrotnym kliknięciu, a contextmenu po kliknięciu prawym przyciskiem myszy (często jest anulowane, aby wyświetlić niestandardowe menu).
el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());mousedown, mouseup, mousemove
Zapewniają szczegółową kontrolę: naciśnięcia, zwolnienia i ruchu. Są elementami składowymi interakcji typu przeciągnij i upuść.
box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));mouseenter a mouseover
mouseenter nie propaguje się i ignoruje granice elementów potomnych, natomiast mouseover propaguje się i jest wywoływane podczas przechodzenia na elementy potomne. W przypadku efektu wskazania kursorem zwykle należy użyć mouseenter.
el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));Który przycisk myszy
Właściwość button wskazuje, który przycisk wywołał zdarzenie: 0 — lewy, 1 — środkowy, 2 — prawy.
el.addEventListener("mousedown", (e) => {
if (e.button === 2) console.log("right button");
});keydown i keyup
keydown jest wywoływane w momencie naciśnięcia klawisza (i powtarzane, gdy klawisz jest przytrzymywany), a keyup podczas jego zwolnienia. keypress jest przestarzałe.
input.addEventListener("keydown", (e) => {
console.log("down: " + e.key);
});event.key
e.key to logiczna wartość klawisza: znak, taki jak "a", albo nazwa, taka jak "Enter", "Escape" lub "ArrowUp".
input.addEventListener("keydown", (e) => {
if (e.key === "Escape") console.log("cancel");
});event.code
e.code wskazuje fizyczne położenie klawisza (np. "KeyA" lub "Space") niezależnie od układu klawiatury. Należy używać go do sterowania w grach.
window.addEventListener("keydown", (e) => {
if (e.code === "Space") console.log("jump");
});Skróty klawiaturowe
Połącz flagi modyfikatorów z key, aby wykrywać skróty, i wywołaj preventDefault, aby zastąpić domyślne działanie przeglądarki.
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "s") {
e.preventDefault();
console.log("save");
}
});repeat dla przytrzymanych klawiszy
e.repeat ma wartość true, gdy keydown jest wywoływane dlatego, że klawisz jest przytrzymywany, co pozwala ignorować automatyczne powtórzenia.
window.addEventListener("keydown", (e) => {
if (e.repeat) return;
console.log("first press of " + e.key);
});Szybki test
Wybierz właściwość niezależną od układu klawiatury.
Podsumowanie
Zdarzenia myszy obejmują click, dblclick, mousedown/mouseup/mousemove oraz przyjazne dla efektu wskazania kursorem mouseenter/mouseleave; button wskazuje użyty przycisk. Zdarzenia klawiatury korzystają z keydown/keyup, przy czym e.key określa znak lub nazwę klawisza, e.code — fizyczny klawisz, a e.repeat — stan jego przytrzymania.
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 59
- Lekcje
- 200
Często zadawane pytania
Czy lekcja „Zdarzenia klawiatury i myszy” jest bezpłatna?
Tak — pełny tekst „Zdarzenia klawiatury i myszy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zdarzenia klawiatury i myszy”?
Proszę obsługiwać kliknięcia, naciśnięcia klawiszy i zdarzenia wskaźnika. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Zdarzenia klawiatury i myszy”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?
Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Podstawy addEventListener
- Obiekt zdarzenia
- preventDefault i stopPropagation
- Zdarzenia klawiatury i myszy