JavaScript Academy · Pelajaran

Peristiwa Papan Ketik dan Tetikus

Tangani klik, penekanan tombol, dan peristiwa penunjuk.

Peristiwa Papan Ketik dan Tetikus adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Kelompok Peristiwa Input

Peristiwa tetikus dan papan ketik memungkinkan Anda membuat interaksi yang kaya. Setiap kelompok memiliki jenis dan properti peristiwa khusus.

Peristiwa klik

click dipicu saat tombol utama ditekan lalu dilepas. Peristiwa ini juga dipicu saat tombol dan tautan diaktifkan melalui papan ketik, sehingga mendukung aksesibilitas.

btn.addEventListener("click", () => {
  console.log("activated");
});

Klik ganda dan menu konteks

dblclick dipicu saat terjadi klik ganda, sedangkan contextmenu dipicu saat klik kanan (sering dibatalkan untuk menampilkan menu khusus).

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

Menekan, melepas, dan menggerakkan tetikus

Peristiwa ini memberikan kendali yang terperinci: menekan, melepas, dan bergerak. Semuanya merupakan dasar untuk interaksi seret.

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

mouseenter dibandingkan dengan mouseover

mouseenter tidak mengalir ke atas dan mengabaikan batas elemen anak, sedangkan mouseover mengalir ke atas dan dipicu saat berpindah ke elemen turunan. Biasanya, mouseenter adalah pilihan yang Anda perlukan untuk efek saat kursor diarahkan ke elemen.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

Tombol Tetikus yang Digunakan

Properti button menunjukkan tombol yang memicu peristiwa: 0 untuk kiri, 1 untuk tengah, dan 2 untuk kanan.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

keydown dan keyup

keydown dipicu saat tombol ditekan (dan berulang selama tombol ditahan); keyup dipicu saat tombol dilepas. keypress sudah usang.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key adalah nilai logis tombol: karakter seperti "a" atau nama seperti "Enter", "Escape", atau "ArrowUp".

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code adalah lokasi fisik tombol (seperti "KeyA" atau "Space"), terlepas dari tata letak papan ketik. Gunakan ini untuk kendali permainan.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

Pintasan Papan Ketik

Gabungkan tanda pengubah dengan key untuk mendeteksi pintasan, lalu panggil preventDefault untuk mengganti perilaku bawaan peramban.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

repeat untuk Tombol yang Ditahan

e.repeat bernilai true saat keydown dipicu karena tombol sedang ditahan, sehingga Anda dapat mengabaikan pengulangan otomatis.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

Pemeriksaan Cepat

Pilih properti yang tidak bergantung pada tata letak.

Ringkasan

Peristiwa tetikus mencakup click, dblclick, mousedown/mouseup/mousemove, serta mouseenter/mouseleave yang cocok untuk efek saat kursor diarahkan ke elemen; button mengidentifikasi tombol yang digunakan. Peristiwa papan ketik menggunakan keydown/keyup, dengan e.key untuk karakter/nama tombol, e.code untuk tombol fisik, dan e.repeat untuk tombol yang ditahan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Peristiwa Papan Ketik dan Tetikus” gratis?

Ya — teks lengkap “Peristiwa Papan Ketik dan Tetikus” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Peristiwa Papan Ketik dan Tetikus”?

Tangani klik, penekanan tombol, dan peristiwa penunjuk. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Peristiwa Papan Ketik dan Tetikus” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy