Akademi JavaScript · Pelajaran

Objek Peristiwa

Baca butiran peristiwa seperti sasaran dan jenisnya.

Pelajaran 2 daripada 413 langkah

Objek Peristiwa ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Argumen Peristiwa

Apabila peristiwa dicetuskan, pelayar menghantar objek peristiwa kepada pengendali anda. Objek itu membawa butiran tentang perkara yang berlaku dan elemen yang terlibat.

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

event.type

event.type ialah nama peristiwa, yang membolehkan satu pengendali memberikan respons yang berbeza kepada jenis peristiwa yang berbeza.

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

event.target

event.target ialah elemen tempat peristiwa itu sebenarnya bermula, iaitu elemen paling dalam yang menerima interaksi.

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

event.currentTarget

event.currentTarget ialah elemen yang pendengarnya sedang dijalankan, iaitu elemen yang anda panggil addEventListener padanya.

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

target Berbanding currentTarget

Apabila peristiwa menggelembung, target boleh menjadi anak, manakala currentTarget ialah induk yang sedang mendengar. Perbezaan ini menjadi asas kepada delegasi peristiwa.

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

Delegasi Peristiwa

Pasangkan satu pendengar pada induk dan gunakan target.closest untuk mencari anak yang menerima tindakan. Cara ini lebih mudah dikembangkan berbanding menggunakan banyak pendengar.

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

event.timeStamp

event.timeStamp merekodkan masa peristiwa dicipta, yang berguna untuk mengukur tempoh antara peristiwa.

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

Koordinat dalam Peristiwa Tetikus

Peristiwa tetikus menambah data kedudukan seperti clientX/clientY (berbanding ruang pandang) dan pageX/pageY (berbanding dokumen).

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

Kekunci Pengubah

Sifat seperti e.shiftKey, e.ctrlKey, e.altKey dan e.metaKey memberitahu anda kekunci pengubah yang sedang ditekan.

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

event.isTrusted

event.isTrusted bernilai true untuk peristiwa sebenar yang dijana pengguna dan false untuk peristiwa yang dicipta oleh skrip, lalu membantu membezakan masukan sebenar.

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

Membaca Kekunci

Peristiwa papan kekunci mendedahkan e.key (aksara atau nama) supaya anda boleh memberikan respons kepada kekunci tertentu.

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

Ujian Pantas

Bezakan kedua-dua sasaran.

Jawab dalam pelajaran interaktif

Ringkasan

Objek peristiwa menerangkan peristiwa itu: type, target (tempat peristiwa bermula) dan currentTarget (tempat pendengar berada). Perbezaan antara kedua-duanya membolehkan delegasi peristiwa. Peristiwa juga mendedahkan koordinat, kekunci pengubah, key, timeStamp dan isTrusted.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Objek Peristiwa” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Objek Peristiwa”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Objek Peristiwa”?

Baca butiran peristiwa seperti sasaran dan jenisnya. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Objek Peristiwa” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript