Cơ bản ⏱️ 21:20 🔥 Nổi bật

Event listeners & xử lý tương tác người dùng

Người dùng click, gõ, cuộn trang — mỗi hành động là một event. addEventListener là cách bạn "lắng nghe" và phản hồi những sự kiện đó. Đây là nền tảng của mọi ứng dụng web tương tác.

Event là gì?

Event là tín hiệu mà trình duyệt phát ra khi có điều gì xảy ra: người dùng click chuột (click), gõ phím (keydown), gửi form (submit), cuộn trang (scroll), hoặc trang tải xong (DOMContentLoaded).

// File: events.js
// Cách 1: addEventListener (khuyến nghị)
const btn = document.querySelector("#myBtn")
btn.addEventListener("click", () => {
  alert("Bạn vừa bấm nút!")
})

// Cách 2: onclick (cũ, chỉ gán được 1 handler)
btn.onclick = () => { alert("Click!") }

// Event object chứa thông tin chi tiết
btn.addEventListener("click", (event) => {
  console.log(event.target)     // phần tử được click
  console.log(event.type)       // "click"
  console.log(event.clientX)    // toạ độ chuột
})

Các event hay dùng nhất

Event	Khi nào xảy ra	Hay dùng cho
`click`	Bấm chuột / tap	Nút, link, card
`submit`	Gửi form	Form đăng nhập/đăng ký
`input`	Gõ ký tự vào ô input	Search realtime, validate
`change`	Giá trị ô input thay đổi + rời focus	Dropdown, checkbox
`keydown` / `keyup`	Nhấn / thả phím	Phím tắt, game
`DOMContentLoaded`	HTML tải xong, chưa cần ảnh	Khởi tạo JS

Form handling

Bắt event submit của form, gọi event.preventDefault() để trang không reload, rồi đọc giá trị từ các input.

// File: form.js
const form = document.querySelector("#loginForm")

form.addEventListener("submit", (e) => {
  e.preventDefault() // không reload trang

  const email = document.querySelector("#email").value
  const password = document.querySelector("#password").value

  // Validate đơn giản
  if (!email || !password) {
    alert("Vui lòng nhập đầy đủ!")
    return
  }

  console.log("Đăng nhập:", { email, password })
  // Sau này: gửi lên server bằng fetch()
})

Event delegation: lắng nghe thông minh

Thay vì gắn event cho từng <li>, gắn 1 lần cho <ul> cha. Khi event xảy ra, kiểm tra event.target để biết phần tử con nào bị click. Tiết kiệm bộ nhớ và hoạt động cả khi thêm phần tử mới.

// File: delegation.js
// Thay vì: mỗi li.addEventListener("click", ...)
// Dùng delegation: gắn 1 lần cho ul cha

const list = document.querySelector("#todoList")

list.addEventListener("click", (e) => {
  // Kiểm tra phần tử bị click có phải nút xoá không
  if (e.target.classList.contains("delete-btn")) {
    const li = e.target.closest("li")
    li.remove()
  }
})

❓ Vì sao cần gọi event.preventDefault() khi bắt event submit của form?