Xử lý sự kiện trong JavaScript

Sự kiện (event) trong JavaScript giúp trang web trở nên tương tác động bằng cách phản hồi với các hành động của người dùng, như nhấp chuột, nhập dữ liệu, di chuột, nhấn phím, v.v.

Bài học này sẽ hướng dẫn:

• Các cách gán sự kiện: onclick, onchange, oninput, onmouseover, onkeydown, ...
• Sử dụng addEventListener() để xử lý nhiều sự kiện.
• Ngăn chặn hành vi mặc định bằng preventDefault().
• Ví dụ thực tế: Kiểm tra dữ liệu nhập và hiển thị thông báo lỗi khi nhập sai.

Sự kiện (event) trong JavaScript

1. Các cách gán sự kiện trong JavaScript

Gán sự kiện trực tiếp trong HTML (Inline Event)

Bạn có thể gán sự kiện trực tiếp trong thẻ HTML bằng cách sử dụng các thuộc tính sự kiện.

Ví dụ: Bắt sự kiện onclick

<button onclick="alert('Bạn đã nhấn nút!')">Nhấn tôi</button>

Khi nhấn nút, một hộp thoại thông báo sẽ xuất hiện.

Gán sự kiện bằng JavaScript (Event Property)

Một cách khác là gán sự kiện trực tiếp trong JavaScript.

Ví dụ:

<button id="btn">Nhấn tôi</button>

<script>
    document.getElementById("btn").onclick = function () {
        alert("Sự kiện được kích hoạt!");
    };
</script>

Nhược điểm: Nếu gán một sự kiện mới, sự kiện cũ sẽ bị ghi đè.

Gán sự kiện bằng addEventListener() (Cách tốt nhất)

Dùng addEventListener() là cách tối ưu nhất, giúp gán nhiều sự kiện vào cùng một phần tử mà không bị ghi đè.

Ví dụ:

<button id="btn">Nhấn tôi</button>

<script>
    let button = document.getElementById("btn");
    button.addEventListener("click", function () {
        alert("Sự kiện click!");
    });
</script>

Ưu điểm:

• Không bị ghi đè khi gán nhiều sự kiện.
• Hỗ trợ các tùy chọn nâng cao (ngăn chặn sự kiện, chỉ chạy một lần, v.v.).

2. Một số sự kiện quan trọng

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

• onclick - Khi người dùng nhấp vào phần tử.
• onmouseover - Khi chuột di chuyển vào phần tử.
• onmouseout - Khi chuột rời khỏi phần tử.

Ví dụ: Đổi màu khi di chuột vào và rời khỏi

<p id="text">Di chuột vào tôi!</p>

<script>
    let text = document.getElementById("text");

    text.onmouseover = function () {
        text.style.color = "red";
    };

    text.onmouseout = function () {
        text.style.color = "black";
    };
</script>

Khi di chuột vào, chữ sẽ đổi màu đỏ; khi rời chuột, chữ trở lại màu đen.

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

• onkeydown - Khi nhấn phím.
• onkeyup - Khi thả phím.
• onkeypress - Khi nhấn và giữ phím (đã lỗi thời, nên dùng onkeydown).

Ví dụ: Hiển thị phím vừa nhập

<input type="text" id="input" placeholder="Nhập gì đó...">
<p id="result"></p>

<script>
    document.getElementById("input").onkeydown = function (event) {
        document.getElementById("result").innerText = "Bạn vừa nhấn: " + event.key;
    };
</script>

Khi nhập ký tự, nội dung nhập sẽ hiển thị bên dưới.

Sự kiện form (Form Events)

• onchange - Khi giá trị ô input thay đổi.
• oninput - Khi nhập dữ liệu (ngay lập tức).
• onsubmit - Khi gửi form.

Ví dụ: Bắt sự kiện nhập dữ liệu trong ô input

<input type="text" id="name" placeholder="Nhập tên của bạn">
<p id="output"></p>

<script>
    document.getElementById("name").oninput = function () {
        document.getElementById("output").innerText = "Tên: " + this.value;
    };
</script>

Khi nhập tên, nội dung sẽ hiển thị ngay bên dưới.

3. Ngăn chặn hành vi mặc định với preventDefault()

Một số sự kiện có hành vi mặc định (ví dụ: nhấn submit sẽ tải lại trang). Ta có thể dùng preventDefault() để ngăn chặn điều này.

Ví dụ: Ngăn form tự động tải lại khi submit

<form id="myForm">
    <input type="text" placeholder="Nhập email">
    <button type="submit">Gửi</button>
</form>

<script>
    document.getElementById("myForm").addEventListener("submit", function (event) {
        event.preventDefault(); // Ngăn không cho form tải lại trang
        alert("Form đã được gửi nhưng không tải lại trang!");
    });
</script>

Khi nhấn "Gửi", form sẽ không tải lại trang nhưng vẫn hiển thị thông báo.

4. Ví dụ thực tế: Kiểm tra dữ liệu nhập và hiển thị lỗi

Yêu cầu: Nếu nhập sai email, hiển thị lỗi màu đỏ.

<input type="email" id="email" placeholder="Nhập email">
<p id="error" style="color: red;"></p>

<script>
    document.getElementById("email").oninput = function () {
        let email = this.value;
        let errorText = document.getElementById("error");

        if (!email.includes("@")) {
            errorText.innerText = "Email phải chứa ký tự @";
        } else {
            errorText.innerText = "";
        }
    };
</script>

Nếu nhập email không chứa "@", một dòng thông báo lỗi sẽ xuất hiện.

Kết luận

• Có nhiều cách gán sự kiện: Trực tiếp trong HTML, gán bằng JavaScript hoặc dùng addEventListener().
• Các sự kiện quan trọng: Click, chuột, bàn phím, nhập dữ liệu, gửi form.
• preventDefault() giúp ngăn hành vi mặc định của trình duyệt.
• Ví dụ thực tế: Kiểm tra email nhập vào và hiển thị lỗi nếu sai.