1. Sự kiện Click

Khái Niệm

Sự kiện click xảy ra khi người dùng nhấp chuột vào một phần tử HTML. Đây là một trong những sự kiện phổ biến nhất và thường được sử dụng để thực hiện các hành động khi người dùng tương tác với giao diện.

Ví Dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Event Example</title>
    <style>
        #myButton {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="myButton">Click me</button>

    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
</body>
</html>

Giải Thích

HTML: Tạo một nút với id là myButton.
JavaScript: Sử dụng addEventListener để lắng nghe sự kiện click trên nút. Khi người dùng nhấp vào nút, một thông báo (alert) sẽ được hiển thị.

Tinh Chỉnh và Tùy Chỉnh

Bạn có thể thay đổi hành động khi nhấp chuột bằng cách thay đổi hàm callback trong addEventListener.
Có thể sử dụng event.preventDefault() để ngăn chặn hành động mặc định của sự kiện (như không gửi form).

2. Sự kiện Mouseover và Mouseout

Khái Niệm

mouseover: Sự kiện xảy ra khi con trỏ chuột di chuyển vào phần tử.
mouseout: Sự kiện xảy ra khi con trỏ chuột di chuyển ra khỏi phần tử.

Ví Dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouseover and Mouseout Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f1f1f1;
            border: 1px solid #ddd;
            margin: 20px;
            transition: background-color 0.3s;
        }
        .box.hover {
            background-color: #4CAF50;
        }
    </style>
</head>
<body>
    <div class="box" id="myBox">Hover over me!</div>

    <script>
        const box = document.getElementById('myBox');

        box.addEventListener('mouseover', function() {
            box.classList.add('hover');
        });

        box.addEventListener('mouseout', function() {
            box.classList.remove('hover');
        });
    </script>
</body>
</html>

Giải Thích

HTML: Tạo một div với class box và id myBox.
JavaScript: Sử dụng addEventListener để lắng nghe sự kiện mouseover và mouseout. Khi con trỏ chuột di chuyển vào hoặc ra khỏi phần tử, lớp CSS hover được thêm hoặc gỡ bỏ, thay đổi màu nền của phần tử.

Tinh Chỉnh và Tùy Chỉnh

Bạn có thể thay đổi hiệu ứng bằng cách thay đổi CSS trong lớp hover.
Thực hiện các hành động khác khi sự kiện xảy ra, chẳng hạn như thay đổi nội dung hoặc kích thước phần tử.

3. Sự kiện Keydown, Keyup, và Keypress

Khái Niệm

keydown: Sự kiện xảy ra khi một phím trên bàn phím được nhấn xuống.
keyup: Sự kiện xảy ra khi một phím được thả ra.
keypress: Sự kiện xảy ra khi một phím có thể tạo ra ký tự (như các ký tự chữ và số) được nhấn.

Ví Dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Key Events Example</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="Type something...">

    <script>
        const input = document.getElementById('myInput');

        input.addEventListener('keydown', function(event) {
            console.log('Key down:', event.key);
        });

        input.addEventListener('keyup', function(event) {
            console.log('Key up:', event.key);
        });

        input.addEventListener('keypress', function(event) {
            console.log('Key press:', event.key);
        });
    </script>
</body>
</html>

Giải Thích

HTML: Tạo một trường nhập liệu (input) để người dùng có thể nhập văn bản.
JavaScript: Sử dụng addEventListener để lắng nghe các sự kiện keydown, keyup, và keypress. Khi người dùng nhấn, giữ hoặc thả phím, tên của phím (event.key) sẽ được in ra console.

Tinh Chỉnh và Tùy Chỉnh

Có thể sử dụng các sự kiện này để thực hiện kiểm tra đầu vào, như kiểm tra xem người dùng đã nhấn phím Enter hay không.
Có thể kết hợp với các điều kiện để xử lý các phím cụ thể hoặc kết hợp các phím.

4. Sự kiện Submit

Khái Niệm

Sự kiện submit xảy ra khi một biểu mẫu (form) được gửi đi. Thường được sử dụng để thực hiện kiểm tra dữ liệu trước khi gửi hoặc ngăn chặn gửi biểu mẫu nếu dữ liệu không hợp lệ.

Ví Dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submit Event Example</title>
</head>
<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Submit</button>
    </form>

    <script>
        const form = document.getElementById('myForm');

        form.addEventListener('submit', function(event) {
            event.preventDefault(); // Ngăn chặn hành động gửi biểu mẫu mặc định
            console.log('Form submitted!');
            // Thực hiện các hành động khác như kiểm tra dữ liệu, gửi AJAX, v.v.
        });
    </script>
</body>
</html>

Giải Thích

HTML: Tạo một biểu mẫu với trường nhập liệu và nút gửi.
JavaScript: Sử dụng addEventListener để lắng nghe sự kiện submit. Khi biểu mẫu được gửi, hành động mặc định (gửi biểu mẫu) được ngăn chặn và một thông báo được in ra console.

Tinh Chỉnh và Tùy Chỉnh

Có thể thêm các kiểm tra hợp lệ trước khi gửi dữ liệu hoặc gửi dữ liệu qua AJAX thay vì gửi biểu mẫu truyền thống.
Có thể sử dụng event.target để truy cập các trường dữ liệu của biểu mẫu và xử lý chúng.

5. Sự kiện Resize và Scroll

Khái Niệm

resize: Sự kiện xảy ra khi kích thước cửa sổ trình duyệt thay đổi.
scroll: Sự kiện xảy ra khi người dùng cuộn trang hoặc một phần tử có thanh cuộn.

Ví Dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resize and Scroll Event Example</title>
    <style>
        #scrollable {
            width: 100%;
            height: 200px;
            overflow: scroll;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="scrollable">Scroll me!</div>
    <script>
        window.addEventListener('resize', function() {
            console.log('Window resized to', window.innerWidth, 'x', window.innerHeight);
        });

        document.getElementById('scrollable').addEventListener('scroll', function() {
            console.log('Element scrolled to', this.scrollTop);
        });
    </script>
</body>
</html>

Giải Thích

HTML: Tạo một phần tử cuộn và lắng nghe sự kiện scroll.
JavaScript: Sử dụng addEventListener để lắng nghe sự kiện resize của cửa sổ và sự kiện scroll của phần tử. Khi kích thước cửa sổ thay đổi hoặc phần tử được cuộn, thông tin liên quan sẽ được in ra console.

Tinh Chỉnh và Tùy Chỉnh

Có thể thực hiện các hành động như thay đổi kiểu dáng hoặc sắp xếp lại giao diện khi cửa sổ thay đổi kích thước.
Đối với sự kiện cuộn, có thể thực hiện các hành động như lazy loading hoặc hiển thị thông báo khi cuộn đến cuối trang.

Những ví dụ và hướng dẫn trên đây cung cấp cái nhìn tổng quan và chi tiết về các sự kiện phổ biến trong JavaScript. Bạn có thể tùy chỉnh và mở rộng chúng để phù hợp với yêu cầu cụ thể của dự án. Nếu bạn có thêm câu hỏi hoặc cần thêm thông tin chi tiết, hãy cho tôi biết nhé!

JavaScript