JavaScript - DOM Events: A Beginner's Guide

Xin chào các pháp sư lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới của JavaScript DOM Events. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng khám phá chủ đề này. Vậy, hãy lấy một cốc饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau lặn sâu vào!

What are DOM Events?

Trước khi chúng ta nhảy vào các loại sự kiện cụ thể, hãy hiểu DOM Events là gì. Hãy tưởng tượng bạn đang ở một buổi tiệc (tất nhiên là buổi tiệc lập trình rồi!). Mỗi khi có điều gì xảy ra - ai đó đến, bài hát thay đổi, hoặc ai đó làm rơi đồ uống - đó là một "sự kiện". Trong thế giới phát triển web, DOM Events cũng tương tự. Chúng là những điều xảy ra với các phần tử HTML trên trang web, như một nút bị nhấp hoặc con trỏ chuột di chuột qua một hình ảnh.

Bây giờ, hãy cùng khám phá một số loại sự kiện phổ biến và cách sử dụng chúng!

The onclick Event Type

Sự kiện onclick có lẽ là loại sự kiện phổ biến nhất bạn sẽ gặp phải. Nó xảy ra khi người dùng nhấp vào một phần tử HTML. Hãy xem một ví dụ đơn giản:

<button id="myButton">Nhấp vào tôi!</button>

<script>
document.getElementById("myButton").onclick = function() {
alert("Bạn đã nhấp vào nút!");
}
</script>

Trong ví dụ này, chúng ta có một nút với ID "myButton". Mã JavaScript chọn nút này bằng cách sử dụng document.getElementById("myButton"), sau đó gán một hàm vào thuộc tính onclick của nó. Khi nút được nhấp, nó sẽ kích hoạt một thông báo nói "Bạn đã nhấp vào nút!"

Mẹo chuyên nghiệp: Hãy thử mã này сами! Tạo một tệp HTML, dán mã này vào, và mở nó trong trình duyệt. Luôn thú vị hơn khi thấy mọi thứ hoạt động!

The ondblclick Event Type

Bây giờ, nếu chúng ta muốn một điều gì đó xảy ra khi người dùng nhấp đúp, sự kiện ondblclick sẽ rất hữu ích. Dưới đây là một ví dụ:

<p id="myParagraph">Nhấp đúp vào tôi để thay đổi màu sắc của tôi!</p>

<script>
document.getElementById("myParagraph").ondblclick = function() {
this.style.color = "red";
}
</script>

Trong trường hợp này, khi bạn nhấp đúp vào đoạn văn, màu chữ của nó sẽ thay đổi thành đỏ. Từ khóa this tham chiếu đến phần tử kích hoạt sự kiện (trong trường hợp này, đoạn văn).

The onkeydown Event Type

Chuyển sang các sự kiện từ bàn phím, hãy xem sự kiện onkeydown. Nó được kích hoạt khi một phím trên bàn phím được nhấn xuống. Dưới đây là một ví dụ thú vị:

<input id="myInput" type="text">
<p id="output"></p>

<script>
document.getElementById("myInput").onkeydown = function(event) {
document.getElementById("output").innerHTML = "Bạn đã nhấn: " + event.key;
}
</script>

Mã này tạo một trường nhập và một đoạn văn. Mỗi khi bạn nhấn một phím trong khi trường nhập được聚焦, đoạn văn sẽ cập nhật để hiển thị phím bạn đã nhấn. Đối tượng event chứa thông tin về sự kiện, bao gồm phím nào đã được nhấn (event.key).

The onmouseenter and onmouseleave Events

Những sự kiện này giống như một trò chơi peek-a-boo với con trỏ chuột của bạn! onmouseenter được kích hoạt khi con trỏ chuột vào một phần tử, và onmouseleave khi nó rời khỏi. Hãy xem chúng trong hành động:

<div id="myBox" style="width: 200px; height: 200px; background-color: yellow;">
Di chuột vào tôi!
</div>

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

box.onmouseenter = function() {
this.style.backgroundColor = "green";
this.innerHTML = "Xin chào!";
}

box.onmouseleave = function() {
this.style.backgroundColor = "yellow";
this.innerHTML = "Di chuột vào tôi!";
}
</script>

Điều này tạo ra một hộp vàng mà thay đổi thành xanh lá cây và chào bạn khi bạn di chuột vào nó, sau đó trở lại khi con trỏ chuột rời khỏi. Đó giống như hộp này là khiêm tốn và chỉ muốn chào bạn khi bạn gần gũi!

HTML 5 Standard DOM Events

HTML5 đã引入 một loạt các sự kiện tiêu chuẩn mới. Hãy xem một vài sự kiện thú vị:

The onDrag Event

<div id="dragMe" draggable="true" style="width: 100px; height: 100px; background-color: blue;">
Kéo tôi!
</div>
<div id="dropZone" style="width: 200px; height: 200px; border: 2px dashed black;">
Thả vào đây!
</div>

<script>
let dragElement = document.getElementById("dragMe");
let dropZone = document.getElementById("dropZone");

dragElement.ondragstart = function(event) {
event.dataTransfer.setData("text", event.target.id);
}

dropZone.ondragover = function(event) {
event.preventDefault();
}

dropZone.ondrop = function(event) {
event.preventDefault();
let data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>

Ví dụ này minh họa chức năng kéo và thả. Bạn có thể kéo hộp xanh và thả nó vào khu vực có viền黑色. Nó sử dụng nhiều sự kiện: ondragstart, ondragover, và ondrop.

The onOnline and onOffline Events

Những sự kiện này được kích hoạt khi trình duyệt phát hiện kết nối internet được thiết lập hoặc bị mất:

<p id="status">Trạng thái kết nối của bạn sẽ xuất hiện ở đây.</p>

<script>
window.addEventListener("online", function() {
document.getElementById("status").innerHTML = "Bạn đã quay lại trực tuyến!";
});

window.addEventListener("offline", function() {
document.getElementById("status").innerHTML = "Ồ, bạn đã ngoại tuyến.";
});
</script>

Mã này cập nhật một đoạn văn để告诉 bạn liệu bạn có đang trực tuyến hay không. Hãy thử nó bằng cách tắt Wi-Fi của bạn!

Summary of Event Types

Dưới đây là bảng tóm tắt các loại sự kiện chúng ta đã thảo luận:

Loại Sự Kiện	Mô Tả	Ví Dụ Sử Dụng
onclick	Được kích hoạt khi một phần tử được nhấp	Nhấp nút, chuyển đổi phần tử
ondblclick	Được kích hoạt khi một phần tử bị nhấp đúp	Mở/đóng bảng, phóng to/thu nhỏ
onkeydown	Được kích hoạt khi một phím bị nhấn xuống	Xác thực biểu mẫu, phím tắt
onmouseenter	Được kích hoạt khi con trỏ chuột vào một phần tử	Hiển thị chú thích, nổi bật phần tử
onmouseleave	Được kích hoạt khi con trỏ chuột rời khỏi một phần tử	Ẩn chú thích, đặt lại phong cách phần tử
ondragstart	Được kích hoạt khi một phần tử bắt đầu bị kéo	Khởi động các thao tác kéo và thả
ondrop	Được kích hoạt khi một phần tử bị thả	Hoàn thành các thao tác kéo và thả
online	Được kích hoạt khi trình duyệt phát hiện kết nối internet	Cập nhật UI cho trạng thái trực tuyến
offline	Được kích hoạt khi trình duyệt phát hiện mất kết nối internet	Cập nhật UI cho trạng thái ngoại tuyến

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của JavaScript DOM Events, từ các cú nhấp đơn giản đến phép thuật kéo và thả. Nhớ rằng, cách tốt nhất để học là làm, vì vậy đừng ngại thử nghiệm với các ví dụ này và tạo ra riêng bạn. Ai biết được? Bạn có thể chỉ cần xây dựng ứng dụng web tương tác lớn tiếp theo!

Chúc các bạn lập trình vui vẻ, và may mắn sẽ luôn xử lý sự kiện của bạn một cách suôn sẻ!

Credits: Image by storyset