JavaScript DOM Events (Sự kiện DOM) là gì? Các loại phổ biến

DOM Events (Sự kiện DOM) là các hành động hoặc xảy ra trên trang web (click chuột, nhấn phím, load trang, submit form, cuộn chuột...) mà JavaScript có thể "lắng nghe" và phản ứng (xử lý). Mỗi phần tử HTML (Element) đều có một tập hợp các sự kiện có thể gán trình xử lý (Event Handler/Listener).

Cơ chế

• Event Target: Phần tử phát sinh sự kiện (button, input, window, document...).
• Event Type: Loại sự kiện (click, keydown, submit...).
• Event Handler / Listener: Hàm JavaScript được gọi khi sự kiện xảy ra.
• Event Object: Đối tượng chứa thông tin chi tiết về sự kiện (vị trí chuột, phím nhấn, target element...), truyền tự động vào handler.

Cách gán Event Handler (3 cách)

1. HTML Attribute: <button onclick="handler()"> (Cũ, không khuyên dùng production).
2. DOM Property: element.onclick = handler (Chỉ 1 handler/event).
3. addEventListener(): element.addEventListener('click', handler) (CHUẨN, KHUYẾN DÙNG) - Nhiều handler, truyền event object, options.

Các loại Event phổ biến (Phân nhóm)

1. Mouse Events (Sự kiện chuột)

2. Keyboard Events (Sự kiện bàn phím)

Event Object quan trọng: event.key (ký tự), event.code (vị trí phím vật lý), event.ctrlKey, shiftKey, altKey, metaKey.

3. Form Events (Sự kiện Form)

4. Window/Document Events

• load: Trang + tài nguyên load xong.
• DOMContentLoaded: HTML parse xong, DOM sẵn sàng (nhanh hơn load).
• resize: Cửa sổ thay đổi kích thước.
• scroll: Cuộn trang.
• beforeunload: Trước khi rời trang (confirm close).
• hashchange: URL hash thay đổi (#...).
• popstate: History thay đổi (back/forward).

5. Touch Events (Mobile)

• touchstart, touchmove, touchend, touchcancel.
• event.touches, event.changedTouches (danh sách ngón tay).

Ví dụ thực tế: Xử lý Form Submit (Best Practice)

<form id="loginForm">
    <input type="email" name="email" required>
    <input type="password" name="password" required>
    <button type="submit">Đăng nhập</button>
</form>

<script>
const form = document.getElementById("loginForm");
form.addEventListener("submit", async function(event) {
    event.preventDefault(); // Ngăn reload trang mặc định
    
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    
    try {
        const response = await fetch("/api/login", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data)
        });
        if (response.ok) {
            window.location.href = "/dashboard";
        } else {
            alert("Đăng nhập thất bại");
        }
    } catch (err) {
        console.error(err);
        alert("Lỗi kết nối");
    }
});
</script>

Event Object (Đối tượng sự kiện) - Thông tin quan trọng

Event Flow: Capturing -> Target -> Bubbling

Sự kiện lan truyền: Capturing Phase (Window -> ... -> Parent -> Target) -> Target Phase -> Bubbling Phase (Target -> Parent -> ... -> Window). Mặc định listener chạy ở Bubbling. Dùng addEventListener(type, handler, {capture: true}) để chạy ở Capturing.

Tóm lại: DOM Events là cầu nối giữa người dùng/trình duyệt và code JS. Hãy dùng addEventListener, hiểu rõ Event Object, các loại event chính (click, submit, input, keydown, load), và luồng Capturing/Bubbling để viết code tương tác hiệu quả, an toàn.