Kịch bản thuyết trình: Slides 116, 117

Mình tiếp tục với slide 116 và 117 về DOM Events (Sự kiện DOM).

DOM Events là gì?

Trong JavaScript, event (sự kiện) là các hành động xảy ra trên trang web (ví dụ: người dùng nhấp chuột, nhấp bàn phím, tải trang xong...). DOM cho phép ta bắt và xử lý các sự kiện này để tạo sự tương tác với người dùng.

Các phần tử HTML có thể nhận thuộc tính sự kiện (event attributes) chứa mã JavaScript, ví dụ:

<button onclick="...">...</button>

Hoặc:

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

Một số sự kiện phổ biến:

  • onchange: khi nội dung của một phần tử thay đổi.
  • onclick: khi người dùng nhấn chuột vào phần tử.
  • onmouseover: khi di chuột vào phần tử.
  • onmouseout: khi di chuột ra khỏi phần tử.
  • onkeydown: khi người dùng nhấn phím bất kỳ.
  • onload: khi trình duyệt tải xong trang.

Có nhiều cách làm việc với events:

  1. Gắn mã JavaScript trực tiếp trong thuộc tính HTML.
  2. Gọi một hàm khi event xảy ra.
  3. Gán handler từ JavaScript.
  4. Ngăn chặn event được gửi hoặc xử lý.

addEventListener() - Cách chuyên nghiệp

Tổng quan về addEventListener()

  • Dùng để gắn sự kiện cho phần tử, document hoặc window.
  • Cho phép nhiều handler cùng lúc, không bị ghi đè.
  • Hỗ trợ bubbling (mặc định) và capturing.
  • Giúp tách JS khỏi HTML, code rõ ràng và dễ quản lý.

Cú pháp cơ bản:

element.addEventListener(event, function, useCapture);

Trong đó:

  • event: loại sự kiện (ví dụ: "click", "mousedown", "mousemove", "resize"...v.v)
  • function: hàm xử lý sự kiện (có thể là hàm ẩn danh hoặc đã đặt tên).
  • useCapture (tùy chọn): false (mặc định, xử lý theo bubbling); true (chế độ capturing)

Ví dụ minh họa:

Gắn sự kiện click đơn giản:

document.getElementById("myBtn").addEventListener("click", displayDate);

Gắn nhiều sự kiện cho cùng phần tử mà không ghi đè:

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Như vậy là mình đã trình bày xong về DOM Events và cách sử dụng addEventListener() để xử lý sự kiện trong JavaScript.