JavaScript - Sự kiện Keyboard

Xin chào các bạn tương lai của các pháp sư JavaScript! Hôm nay, chúng ta sẽ cùng lặn vào thế giới đầy thú vị của các sự kiện keyboard. Là người dạy máy tính ở khu phố của bạn, tôi ở đây để hướng dẫn các bạn từng bước trong chuyến phiêu lưu này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu chuyến hành trình với keyboard nhé!

Các Sự kiện Keyboard Thường Gặp

Trước khi chúng ta bắt đầu viết mã, hãy làm quen với các sự kiện keyboard phổ biến nhất trong JavaScript. Hãy tưởng tượng những sự kiện này là những cách khác nhau mà máy tính của bạn lắng nghe bàn phím của bạn:

Tên Sự Kiện	Mô Tả
keydown	Được kích hoạt khi một phím được nhấn xuống
keypress	Được kích hoạt khi một phím được nhấn (chỉ các phím ký tự)
keyup	Được kích hoạt khi một phím được释放

Những sự kiện này giống như đôi tai của máy tính bạn, luôn lắng nghe các phím bấm. Thật tuyệt vời phải không?

Thuộc Tính của Sự Kiện Keyboard

Bây giờ, hãy nói về các thuộc tính mà những sự kiện này mang theo. Khi một sự kiện keyboard xảy ra, nó mang theo một số thông tin hữu ích:

Thuộc Tính	Mô Tả
key	Giá trị của phím được nhấn
keyCode	Giá trị Unicode của phím được nhấn (đã lỗi thời)
which	Giá trị Unicode của phím được nhấn (đã lỗi thời)
code	Phím vật lý trên bàn phím

Những thuộc tính này giống như những người đưa tin nhỏ, mang theo những chi tiết quan trọng về phím bạn đã nhấn.

Ví dụ: Sự kiện Keydown

Hãy bắt đầu với ví dụ đầu tiên. Chúng ta sẽ tạo một chương trình đơn giản để lắng nghe sự kiện 'keydown' và hiển thị phím được nhấn.

<h1>Nhấn bất kỳ phím nào</h1>
<p id="output"></p>

<script>
document.addEventListener('keydown', function(event) {
document.getElementById('output').innerHTML = 'Bạn đã nhấn: ' + event.key;
});
</script>

Trong ví dụ này, chúng ta đang nói với máy tính, "Này, lắng nghe bất kỳ phím nào được nhấn, và khi đó xảy ra, hãy cho chúng tôi biết phím đó là gì." Phương thức addEventListener giống như việc đặt một người gián để theo dõi các phím bấm.

Ví dụ: Sự kiện Keypress

Bây giờ, hãy thử sự kiện 'keypress'. Nhớ rằng, sự kiện này chỉ hoạt động với các phím ký tự!

<h1>Gõ điều gì đó</h1>
<p id="output"></p>

<script>
document.addEventListener('keypress', function(event) {
var current = document.getElementById('output').innerHTML;
document.getElementById('output').innerHTML = current + event.key;
});
</script>

Chương trình này giống như một máy đánh chữ. Mỗi khi bạn nhấn một phím ký tự, nó thêm ký tự đó vào những gì đã có. Nó đang xây dựng văn bản khi bạn gõ!

Ví dụ: Sự kiện Keyup

Hãy chuyển sang sự kiện 'keyup'. Lần này, chúng ta sẽ tạo một trò chơi nhỏ mà bạn phải nhấn đúng phím để chiến thắng.

<h1>Nhấn phím 's' để chiến thắng!</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = 'Bạn chiến thắng! ?';
} else {
document.getElementById('output').innerHTML = 'Thử lại!';
}
});
</script>

Trong trò chơi này, chúng ta đang chờ người chơi释放 phím 's'. Nó giống như một trò chơi "Simon Says" đơn giản, nhưng với các phím trên bàn phím!

Ví dụ: Không sử dụng phương thức addEventListener

Bây giờ, hãy nhìn vào cách xử lý sự kiện cũ. Mặc dù addEventListener là cách tiếp cận hiện đại, bạn có thể gặp phương thức này trong mã cũ:

<h1>Nhấn bất kỳ phím nào</h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
document.getElementById('output').innerHTML = 'Phím được nhấn: ' + event.key;
};
</script>

Phương thức này trực tiếp gán một hàm vào thuộc tính onkeydown của tài liệu. Nó giống như đặt một biển hiệu trước cửa của bạn, "Khi ai đó gõ cửa, làm này."

Kết hợp tất cả

Bây giờ chúng ta đã khám phá từng sự kiện, hãy tạo một ví dụ phức tạp hơn sử dụng tất cả ba sự kiện:

<h1>Bộ Kiểm Tra Sự Kiện Keyboard</h1>
<p>Nhấn bất kỳ phím nào để xem các sự kiện xảy ra!</p>
<table id="eventTable">
<tr>
<th>Loại Sự Kiện</th>
<th>Phím</th>
<th>Mã</th>
</tr>
</table>

<script>
function addEventToTable(eventType, event) {
var table = document.getElementById('eventTable');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = eventType;
cell2.innerHTML = event.key;
cell3.innerHTML = event.code;
}

document.addEventListener('keydown', function(event) {
addEventToTable('keydown', event);
});

document.addEventListener('keypress', function(event) {
addEventToTable('keypress', event);
});

document.addEventListener('keyup', function(event) {
addEventToTable('keyup', event);
});
</script>

Ví dụ này tạo một bảng mà sẽ được điền đầy khi bạn nhấn các phím. Nó giống như một日记 của sự kiện keyboard, ghi lại mỗi sự kiện xảy ra!

Và thế là xong, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của các sự kiện keyboard trong JavaScript. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy đừng ngại thử nghiệm với các ví dụ này. Thay đổi chúng, làm chúng bị lỗi, sửa chúng - đó là cách bạn thực sự học hỏi.

Trước khi chúng ta kết thúc, đây là một điều thú vị: Bạn có biết rằng bố cục của bàn phím, với sự sắp xếp QWERTY, ban đầu được thiết kế để làm chậm người gõ phím? Nó được tạo ra cho máy đánh chữ để ngăn chặn các cánh tay kim loại bị kẹt. Nhưng nhìn xem, chúng ta vẫn đang sử dụng cùng bố cục này để tạo ra các tương tác nhanh như chớp trong các ứng dụng web của mình!

Tiếp tục viết mã, tiếp tục học hỏi, và quan trọng nhất, tiếp tục vui vẻ! Hẹn gặp lại các bạn vào lần sau, đây là người dạy máy tính ở khu phố của bạn, kết thúc. Chúc các bạn viết mã vui vẻ!

Credits: Image by storyset