Event và Form trong JavaScript

• check
  Hiểu event là gì và form hoạt động ra sao

  Nhận ra vì sao muốn web tương tác được thì phải biết lắng nghe hành động của người dùng.
• check
  Nhận diện các sự kiện thường gặp

  Phân biệt được click, input, change, submit và biết khi nào nên dùng từng loại.
• check
  Gắn sự kiện và lấy dữ liệu đúng cách

  Sử dụng addEventListener(), đọc dữ liệu bằng .value, chặn reload bằng preventDefault().
• check
  Viết được các bài tương tác cơ bản

  Làm được nút tăng giảm số, nhập tên để hiện lời chào, form đăng ký đơn giản và kiểm tra dữ liệu rỗng.
• check
  Tránh các lỗi rất hay gặp

  Không nhầm .value với .innerText, không quên preventDefault(), và biết dùng trim() khi kiểm tra rỗng.

Event là hành động xảy ra trên trang web: người dùng bấm nút, nhập dữ liệu, gửi form, rê chuột hoặc thay đổi giá trị. Khi sự kiện xảy ra, JavaScript có thể lắng nghe và phản hồi lại.

const btn = document.getElementById("btnGui");

btn.addEventListener("click", function () {
  console.log("Bạn vừa bấm nút");
});

Với các ô nhập, dữ liệu người dùng nhập vào được lấy bằng .value. Còn nếu muốn thay đổi nội dung đang hiển thị trên thẻ p, div, span thì dùng .innerText.

const oNhap = document.getElementById("hoTen");
const ketQua = document.getElementById("ketQua");

const duLieu = oNhap.value;
ketQua.innerText = "Xin chào " + duLieu;

Với form, sự kiện quan trọng nhất là submit. Khi bấm nút có type="submit", trình duyệt thường tải lại trang. Vì vậy ta thường dùng event.preventDefault() để chặn hành vi mặc định trước khi kiểm tra dữ liệu.

const form = document.getElementById("formThongTin");
const ketQua = document.getElementById("ketQua");

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const hoTen = document.getElementById("hoTen").value;

  if (hoTen.trim() === "") {
    ketQua.innerText = "Bạn chưa nhập họ tên";
  } else {
    ketQua.innerText = "Xin chào " + hoTen;
  }
});