JavaScript Academy · Pelajaran

Objek Peristiwa

Baca detail peristiwa seperti target dan jenisnya.

Objek Peristiwa adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Argumen Peristiwa

Saat peristiwa terjadi, peramban meneruskan objek peristiwa kepada fungsi penangan Anda. Objek ini membawa informasi tentang apa yang terjadi dan elemen mana saja yang terlibat.

btn.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});

event.type

event.type adalah nama peristiwa, sehingga satu fungsi penangan dapat merespons berbagai jenis peristiwa secara berbeda.

function handle(e) {
  console.log("Got a " + e.type + " event");
}

event.target

event.target adalah elemen tempat peristiwa sebenarnya berasal, yaitu elemen terdalam yang berinteraksi dengan pengguna.

list.addEventListener("click", (e) => {
  console.log(e.target); // the exact clicked element
});

event.currentTarget

event.currentTarget adalah elemen yang pendengarnya sedang berjalan, yaitu elemen tempat Anda memanggil addEventListener.

list.addEventListener("click", (e) => {
  console.log(e.currentTarget === list); // true
});

target vs currentTarget

Saat peristiwa merambat naik, target dapat berupa anak, sedangkan currentTarget adalah induk yang mendengarkan. Perbedaan ini menjadi dasar delegasi peristiwa.

list.addEventListener("click", (e) => {
  // e.target = clicked <li>
  // e.currentTarget = the <ul>
});

Delegasi Peristiwa

Pasang satu pendengar pada induk, lalu gunakan target.closest untuk menemukan anak yang dikenai tindakan. Cara ini lebih mudah dikembangkan daripada memasang banyak pendengar.

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) console.log(item.dataset.id);
});

event.timeStamp

event.timeStamp mencatat kapan peristiwa dibuat, sehingga berguna untuk mengukur durasi di antara berbagai peristiwa.

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

Koordinat pada Peristiwa Tetikus

Peristiwa tetikus menambahkan data posisi seperti clientX/clientY (relatif terhadap area tampilan) dan pageX/pageY (relatif terhadap dokumen).

area.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY);
});

Tombol Pengubah

Properti seperti e.shiftKey, e.ctrlKey, e.altKey, dan e.metaKey memberi tahu Anda tombol pengubah mana yang sedang ditekan.

btn.addEventListener("click", (e) => {
  if (e.shiftKey) console.log("Shift-click");
});

event.isTrusted

event.isTrusted bernilai benar untuk peristiwa yang dibuat oleh pengguna secara nyata dan bernilai salah untuk peristiwa yang dibuat oleh skrip, sehingga membantu membedakan masukan asli.

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

Membaca Tombol

Peristiwa papan ketik menyediakan e.key (karakter atau nama tombol), sehingga Anda dapat merespons tombol tertentu.

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

Pemeriksaan Cepat

Bedakan kedua target tersebut.

Ringkasan

Objek peristiwa menjelaskan peristiwa tersebut: type, target (tempat peristiwa berasal), dan currentTarget (tempat pendengar berada). Perbedaan di antara keduanya memungkinkan delegasi peristiwa. Peristiwa juga menyediakan koordinat, tombol pengubah, key, timeStamp, dan isTrusted.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Objek Peristiwa” gratis?

Ya — teks lengkap “Objek Peristiwa” 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 “Objek Peristiwa”?

Baca detail peristiwa seperti target dan jenisnya. 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 2 dari 4.

Berapa lama pelajaran “Objek Peristiwa” 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