JavaScript Reference - Tập 16: Event Objects - Lắng nghe mọi tương tác

Table of contents

1. Cơ chế lắng nghe sự kiện

Có 3 cách phổ biến để phản hồi lại một sự kiện:

1. Trong HTML: <button onclick="myFunction()">Click</button>
2. Thuộc tính DOM: btn.onclick = myFunction;
3. Phương thức lắng nghe (Khuyên dùng): btn.addEventListener("click", myFunction);

2. Các loại Event Objects phổ biến

Tùy vào hành động mà trình duyệt cung cấp các đối tượng sự kiện khác nhau:

• MouseEvent: Xảy ra khi người dùng dùng chuột (click, dblclick, mousedown, mouseenter, mousemove).
  • clientX / clientY: Vị trí chuột so với cửa sổ.
  • button: Chuột trái hay chuột phải đã được nhấn.
• KeyboardEvent: Xảy ra khi dùng bàn phím (keydown, keypress, keyup).
  • key: Giá trị của phím (ví dụ “Enter”, “a”).
  • ctrlKey, shiftKey: Kiểm tra phím Ctrl hoặc Shift có đang giữ hay không.
• ClipboardEvent: Các sự kiện sao chép, dán (copy, cut, paste).
• FocusEvent: Khi người dùng chọn hoặc bỏ chọn một ô nhập liệu (focus, blur).

3. Các phương thức điều khiển sự kiện

Đôi khi bạn muốn can thiệp vào cách sự kiện diễn ra:

• event.preventDefault(): Ngăn chặn hành động mặc định của trình duyệt (ví dụ: không cho trình duyệt load lại trang khi bấm nút Submit form).
• event.stopPropagation(): Ngăn chặn sự kiện “nổi bọt” (bubbling) lên các phần tử cha.
• event.target: Trả về phần tử chính xác nơi sự kiện đã xảy ra.
• event.type: Trả về tên sự kiện (ví dụ “click”).

4. Ví dụ thực tế: Xử lý phím tắt

document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault(); // Ngăn trình duyệt lưu file
    console.log("Bạn vừa nhấn Ctrl + S để lưu bài viết!");
  }
});

Lời kết Tập 16

Làm chủ Event Objects giúp bạn kiểm soát hoàn toàn dòng chảy tương tác trên website. Trong Tập 17, chúng ta sẽ khám phá hệ thống Style & Classes Reference để biết cách điều khiển giao diện (CSS) bằng JavaScript cực kỳ linh hoạt.

Hẹn gặp lại các bạn!