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.
myButton
div
với class box
và id myBox
.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ử.hover
.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.input
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.event.target
để truy cập các trường dữ liệu của biểu mẫu và xử lý chúng.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.<!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>
scroll
.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.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é!