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.
<!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>
myButton.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ị.addEventListener.event.preventDefault() để ngăn chặn hành động mặc định của sự kiện (như không gửi form).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ử.
<!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>
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.
<!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>
input) để người dùng có thể nhập văn bản.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.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ệ.
<!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>
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é!
