Event: Menjadikan Halaman Bertindak Balas kepada Pengguna

18 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Pasang listener dengan addEventListener untuk click, input dan submit
Baca maklumat daripada object event dan halang borang daripada memuat semula halaman
Terangkan event bubbling dan gunakannya untuk mengurus banyak elemen dengan satu listener

Idea utama

Event listener bermaksud: "apabila ini berlaku pada elemen itu, jalankan function ini". Kod anda bukan lagi berjalan dari atas ke bawah sekali sahaja — ia kini menunggu tindakan pengguna.

Dalam pelajaran lepas, skrip anda mengubah halaman sekali sahaja, sebaik sahaja ia dimuatkan. Antara muka sebenar pula menunggu: tiada apa berlaku sehingga seseorang klik, menaip atau menghantar borang. Setiap tindakan itu mencetuskan event, dan anda boleh mendengar (listen) event tersebut.

JavaScript

const button = document.querySelector("#like");

button.addEventListener("click", function () {
  console.log("Clicked!");
});

// The same with an arrow function:
button.addEventListener("click", () => console.log("Clicked!"));

Bug: memanggil function serta-merta

JavaScript

button.addEventListener("click", sayHi());

Betul: menyerahkan function untuk digunakan kemudian

JavaScript

button.addEventListener("click", sayHi);

Dengan (), anda menjalankan sayHi sekarang juga dan menyerahkan hasilnya (biasanya undefined). Tanpa (), pelayar akan memanggilnya setiap kali diklik.

Object event

Pelayar menghantar object event yang menerangkan apa yang berlaku kepada function anda. Property paling berguna ialah event.target: elemen tempat event itu berlaku. Untuk kotak teks, event.target.value ialah apa yang sedang ditaip.

JavaScript

const message = document.querySelector("#message");

// "input" fires on every keystroke, paste or delete
message.addEventListener("input", (event) => {
  console.log(event.type);                // "input"
  console.log(event.target.value.length); // characters so far
});

document.addEventListener("keydown", (event) => {
  console.log(event.key); // "a", "Enter", "Escape", …
});

Borang dan preventDefault

Apabila borang dihantar, tindakan lalai pelayar ialah menghantar data dan memuatkan halaman baharu — menghapuskan state JavaScript anda. Untuk mengendalikan borang sendiri, dengar event submit pada borang (bukan butang, supaya tekan Enter pun berfungsi) dan panggil event.preventDefault().

JavaScript

const form = document.querySelector("#guest-form");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // "don't do your default thing — I've got this"
  const name = document.querySelector("#guest-name").value.trim();
  console.log("Welcome, " + name);
});

Dalam pratonton WANCode, preventDefault() yang terlupa tidak akan memuat semula apa-apa — pratonton menghalangnya dan memaparkan petunjuk dalam Konsol. Di laman web sebenar, halaman itu akan dimuat semula.

Event bubbling

Event tidak kekal pada elemen yang anda klik. Selepas dicetuskan di situ, ia naik (bubble) melalui setiap induk — senarai, seksyen, body, document — dan mana-mana listener sepanjang laluan itu turut dijalankan.

Capture dan bubbling event

div

capturebubble

window↓↑

document↓↑

html↓↑

body↓↑

div↓↑

ul↓↑

li↓↑

button● target

Log listener

Klik butang untuk menghantar event click.

Listener bubble pada li memanggil event.stopPropagation()

Dipermudahkan: kita anggap setiap elemen ada satu listener capture dan satu listener bubble. Dalam kod sebenar, hanya listener yang anda tambah akan berjalan. Diperlahankan supaya kelihatan.

Klik pada item senarai juga sampai ke senarai itu dan semua yang di atasnya.

JavaScript

// One listener on the <ul> handles clicks on ANY <li> inside it —
// even items added later. This is called event delegation.
list.addEventListener("click", (event) => {
  const li = event.target.closest("li"); // the <li> that was clicked (or null)
  if (li) {
    li.classList.toggle("done");
  }
});

// (Rarely needed) stop the event from bubbling further:
// event.stopPropagation();

Di bawah Step 1, dengar event click pada #like. Setiap klik patut:

1. menambah 1 kepada likes,

2. memaparkan nombor baharu dalam #likes,

3. memberikan butang itu class liked (ia akan bertukar merah jambu).

Semakan

Setiap klik menambah 1 kepada #likes
Klik memberikan butang class liked

Uji kefahaman

Kenapa button.addEventListener("click", save()) menjalankan save serta-merta, bukan semasa diklik?

() memanggil save serta-merta dan menyerahkan hasilnyaClick listener sentiasa dijalankan sekali pada permulaansave ialah perkataan simpanan

Apakah fungsi event.preventDefault() dalam submit listener sesuatu borang?

Mengosongkan semua inputMenghalang tindakan lalai pelayar — menghantar borang dan memuatkan halaman baharuMenghalang event daripada bubble ke elemen induk

Sebuah <ul> ada click listener. Anda klik <li> di dalamnya. Adakah listener <ul> dijalankan?

Tidak — hanya listener pada <li> dijalankanYa — klik itu bubble naik dari <li> ke <ul>Hanya jika anda double-click

Apa yang anda pelajari

element.addEventListener("type", fn) menjalankan fn setiap kali event itu berlaku — serahkan fn, jangan panggilnya.
Object event memberitahu apa yang berlaku: event.target, event.target.value, event.key.
Kendalikan borang pada submit dan panggil event.preventDefault() supaya kekal di halaman.
Event bubble naik, jadi satu listener pada induk boleh mengurus semua anaknya (delegation).

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.