JavaScript - Window/Document Events

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của các sự kiện JavaScript, đặc biệt là các sự kiện Window và Document. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi sẽ dẫn đường cho bạn trong hành trình này với rất nhiều ví dụ và giải thích. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và bắt đầu nhé!

Window Events

Các sự kiện Window là các hành động xảy ra liên quan đến cửa sổ trình duyệt itself. Các sự kiện này có thể rất hữu ích cho việc tạo ra các ứng dụng web động và phản hồi. Hãy cùng tìm hiểu một số sự kiện window phổ biến nhất:

1. load

Sự kiện load được kích hoạt khi toàn bộ trang, bao gồm tất cả các tài nguyên phụ thuộc như stylesheet và hình ảnh, đã hoàn thành việc tải. Điều này thường được sử dụng để đảm bảo rằng tất cả các phần tử đều có sẵn trước khi chạy các script.

window.addEventListener('load', function() {
console.log("Trang đã tải hoàn chỉnh!");
});

Trong ví dụ này, chúng ta đang thêm một người nghe sự kiện vào đối tượng window. Khi sự kiện 'load' xảy ra, hàm của chúng ta sẽ chạy, ghi một tin nhắn vào console.

2. resize

Sự kiện resize được kích hoạt mỗi khi cửa sổ trình duyệt thay đổi kích thước. Điều này có thể hữu ích cho việc điều chỉnh các bố cục hoặc tính toán lại kích thước.

window.addEventListener('resize', function() {
console.log("Cửa sổ đã thay đổi kích thước thành: " + window.innerWidth + "x" + window.innerHeight);
});

Ở đây, chúng ta đang ghi lại kích thước mới của cửa sổ mỗi khi nó thay đổi kích thước. Điều này có thể hữu ích cho các điều chỉnh thiết kế responsive.

3. scroll

Sự kiện scroll được kích hoạt khi người dùng cuộn trong cửa sổ. Điều này có thể được sử dụng để triển khai cuộn vô hạn hoặc hiển thị/ẩn các phần tử dựa trên vị trí cuộn.

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("Cuộn đến vị trí: " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

Trong ví dụ này, chúng ta đang hiển thị nút 'Back to Top' khi người dùng cuộn hơn 300 pixel xuống trang.

4. unload

Sự kiện unload được kích hoạt khi người dùng rời khỏi trang. Điều này có thể được sử dụng cho các nhiệm vụ làm sạch hoặc cảnh báo người dùng trước khi rời đi.

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

Mã này sẽ cảnh báo người dùng với một hộp thoại xác nhận khi họ cố gắng rời khỏi trang. Hãy nhớ sử dụng điều này một cách tiết kiệm, vì nó có thể làm phiền người dùng!

Document Events

Các sự kiện Document liên quan đến tài liệu HTML itself. Các sự kiện này cho phép chúng ta tương tác với nội dung của trang theo nhiều cách khác nhau. Hãy cùng nhìn vào một số sự kiện document quan trọng:

1. DOMContentLoaded

Sự kiện DOMContentLoaded được kích hoạt khi tài liệu HTML ban đầu đã được tải và phân tích hoàn chỉnh, mà không chờ đợi các tài nguyên bên ngoài hoàn thành việc tải.

document.addEventListener('DOMContentLoaded', function() {
console.log("DOM đã sẵn sàng!");
document.getElementById('myButton').addEventListener('click', function() {
alert("Nút đã được nhấn!");
});
});

Sự kiện này thường được ưa thích hơn window.load vì nó không chờ đợi các hình ảnh và các tài nguyên khác hoàn thành việc tải, cho phép thực thi script nhanh hơn.

2. click

Sự kiện click được kích hoạt khi một phần tử được nhấn. Đây là một trong những sự kiện phổ biến nhất bạn sẽ làm việc với.

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("Nút được nhấn tại tọa độ: " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

Trong ví dụ này, chúng ta đang ghi lại tọa độ của lần nhấn và thay đổi màu nền của nút khi nó được nhấn.

3. keydown và keyup

Các sự kiện này được kích hoạt khi một phím được nhấn (keydown) hoặc释 (keyup).

document.addEventListener('keydown', function(event) {
console.log("Phím được nhấn: " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

Mã này ghi lại每一次 phím được nhấn và simulates a click on a submit button when the Enter key is pressed.

4. mouseover và mouseout

Các sự kiện này được kích hoạt khi con trỏ chuột vào (mouseover) hoặc rời khỏi (mouseout) một phần tử.

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

Điều này tạo ra một hiệu ứng đơn giản khi rê chuột, thay đổi màu nền của phần tử khi con trỏ chuột ở trên nó.

Bảng tóm tắt các phương thức sự kiện

Dưới đây là bảng tóm tắt các phương thức chúng ta đã thảo luận:

Sự kiện	Mô tả	Ví dụ
load	Được kích hoạt khi trang hoàn chỉnh	window.addEventListener('load', function() {...})
resize	Được kích hoạt khi cửa sổ thay đổi kích thước	window.addEventListener('resize', function() {...})
scroll	Được kích hoạt khi cửa sổ được cuộn	window.addEventListener('scroll', function() {...})
unload	Được kích hoạt khi rời khỏi trang	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	Được kích hoạt khi DOM sẵn sàng	document.addEventListener('DOMContentLoaded', function() {...})
click	Được kích hoạt khi phần tử được nhấn	element.addEventListener('click', function(event) {...})
keydown	Được kích hoạt khi phím được nhấn	document.addEventListener('keydown', function(event) {...})
keyup	Được kích hoạt khi phím được释	document.addEventListener('keyup', function(event) {...})
mouseover	Được kích hoạt khi con trỏ chuột vào phần tử	element.addEventListener('mouseover', function() {...})
mouseout	Được kích hoạt khi con trỏ chuột rời khỏi phần tử	element.addEventListener('mouseout', function() {...})

Và đó là tất cả, các bạn! Chúng ta đã bao gồm các cơ bản về các sự kiện Window và Document trong JavaScript. Nhớ rằng, thực hành là cách tốt nhất để trở thành người thạo, vì vậy đừng ngại thử nghiệm với các sự kiện này trong các dự án của riêng bạn. Trước khi bạn biết điều đó, bạn sẽ tạo ra các trang web tương tác và động như một chuyên gia!

Chúc các bạn may mắn và sự kiện của bạn luôn hoạt động như mong đợi!

Credits: Image by storyset