HTML - Tham chiếu sự kiện: Hướng dẫn cơ bản về cách làm cho trang web của bạn tương tác

Xin chào các bạn future web developers! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của các sự kiện HTML. Là một ai đó đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể告诉你 rằng việc hiểu các sự kiện giống như học ngôn ngữ bí mật của tính tương tác web. Vậy, hãy cùng nhau lặn sâu và mở khóa vương quốc kỳ diệu này nhé!

HTML - Events Reference

什么是HTML事件？

Trước khi chúng ta nhảy vào chi tiết, hãy hiểu HTML sự kiện là gì. Hãy tưởng tượng bạn đang ở một buổi tiệc (một trang web), và mỗi khi bạn làm điều gì đó - như chạm vai ai đó (nhấp vào một nút) hoặc thì thầm một bí mật (nhập văn bản) - đó là một sự kiện. Trong thế giới web, các sự kiện là các hành động hoặc sự kiện xảy ra trong trình duyệt của bạn, mà HTML của bạn có thể phát hiện và phản hồi. Đ Cooler, phải không?

Bây giờ, hãy cùng khám phá các loại sự kiện khác nhau và cách sử dụng chúng.

Thuộc tính sự kiện Window

Sự kiện Window giống như chuông cửa vào ngôi nhà của trang web bạn. Chúng cho bạn biết khi ai đó đến hoặc rời đi.

Dưới đây là bảng các sự kiện window phổ biến:

Sự kiện	Mô tả
onload	Được kích hoạt khi trang finishes loading
onunload	Được kích hoạt khi người dùng rời khỏi trang
onresize	Được kích hoạt khi cửa sổ trình duyệt được thay đổi kích thước
onscroll	Được kích hoạt khi người dùng cuộn trang

Hãy xem một ví dụ:

<body onload="alert('Chào mừng đến với trang của tôi!')">
<h1>Trang web tuyệt vời của tôi</h1>
</body>

Trong ví dụ này, ngay khi trang tải xong, bạn sẽ thấy một thông báo chào mừng. Đó giống như chào đón khách của bạn khi họ bước vào!

Sự kiện Form

Forms là nơi thực sự xảy ra tương tác. Đó giống như đang có cuộc trò chuyện với người dùng của bạn.

Dưới đây là bảng các sự kiện form:

Sự kiện	Mô tả
onsubmit	Được kích hoạt khi form được gửi
onreset	Được kích hoạt khi form được đặt lại
onchange	Được kích hoạt khi giá trị của một input thay đổi
onfocus	Được kích hoạt khi một phần tử nhận focus
onblur	Được kích hoạt khi một phần tử mất focus

Hãy xem một ví dụ:

<form onsubmit="alert('Form đã được gửi!'); return false;">
<input type="text" onchange="this.style.backgroundColor='yellow'">
<input type="submit" value="Gửi">
</form>

Trong form này, khi bạn thay đổi input văn bản, nó sẽ chuyển thành màu vàng (ngạc nhiên!), và khi bạn gửi, bạn sẽ nhận được một thông báo. Đó giống như form đang nói lại với bạn!

Sự kiện Keyboard

Sự kiện Keyboard liên quan đến những gì xảy ra khi ngón tay của bạn nhảy múa trên bàn phím.

Dưới đây là bảng các sự kiện keyboard:

Sự kiện	Mô tả
onkeydown	Được kích hoạt khi một phím được nhấn xuống
onkeyup	Được kích hoạt khi một phím được释放
onkeypress	Được kích hoạt khi một phím được nhấn và释放

Hãy thử một ví dụ:

<input type="text" onkeypress="document.body.style.backgroundColor='lightblue'">

Mỗi khi bạn nhấn một phím trong input này, nền trang sẽ chuyển thành màu xanh lam nhạt. Đó giống như chơi một cây đàn piano mà vẽ!

Sự kiện Mouse

Sự kiện Mouse liên quan đến những cú nhấp và di chuyển.

Dưới đây là bảng các sự kiện mouse:

Sự kiện	Mô tả
onclick	Được kích hoạt khi một phần tử được nhấp
ondblclick	Được kích hoạt khi một phần tử được double-click
onmouseover	Được kích hoạt khi con trỏ di chuyển qua một phần tử
onmouseout	Được kích hoạt khi con trỏ di chuyển ra khỏi một phần tử

Hãy xem chúng trong hành động:

<button onclick="this.innerHTML='Đã nhấp!'"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='black'">
Nhấp vào tôi!
</button>

Nút này thay đổi màu khi bạn di chuột qua và thay đổi văn bản khi bạn nhấp vào nó. Đó giống như một nút chameleon!

Sự kiện Drag

Sự kiện Drag làm cho các phần tử của bạn có thể di chuyển, giống như các mảnh trên bàn cờ.

Dưới đây là bảng các sự kiện drag:

Sự kiện	Mô tả
ondrag	Được kích hoạt khi một phần tử được kéo
ondragstart	Được kích hoạt khi người dùng bắt đầu kéo một phần tử
ondragend	Được kích hoạt khi người dùng đã kết thúc kéo phần tử

Dưới đây là một ví dụ đơn giản:

<div draggable="true" ondragstart="alert('Đang bắt đầu kéo!')">
Kéo tôi!
</div>

Khi bạn bắt đầu kéo div này, nó sẽ cảnh báo bạn. Đó giống như phần tử đang nói, "Whee! Tôi đang bay!"

Sự kiện Clipboard

Sự kiện Clipboard liên quan đến việc sao chép, cắt và dán.

Dưới đây là bảng các sự kiện clipboard:

Sự kiện	Mô tả
oncopy	Được kích hoạt khi người dùng sao chép nội dung
oncut	Được kích hoạt khi người dùng cắt nội dung
onpaste	Được kích hoạt khi người dùng dán nội dung

Hãy xem một ví dụ:

<textarea oncopy="alert('Đã sao chép!')" oncut="alert('Đã cắt!')" onpaste="alert('Đã dán!')">
Thử sao chép, cắt hoặc dán ở đây!
</textarea>

This textarea tells you when you're doing clipboard actions. It's like having a chatty notepad!

Sự kiện Media

Sự kiện Media là cho khi bạn đang phát audio hoặc video trên trang của bạn.

Dưới đây là bảng các sự kiện media:

Sự kiện	Mô tả
onplay	Được kích hoạt khi media bắt đầu phát
onpause	Được kích hoạt khi media bị dừng
onended	Được kích hoạt khi media đã kết thúc

Dưới đây là một ví dụ nhanh:

<audio src="song.mp3" controls onplay="alert('Thưởng thức âm nhạc!')" onended="alert('Hy vọng bạn thích nó!')"></audio>

This audio element greets you when you start playing and asks for feedback when it ends. It's like a DJ that cares about your opinion!

Các sự kiện khác

Có rất nhiều sự kiện khác không phù hợp với các thể loại. Dưới đây là một số:

Sự kiện	Mô tả
onerror	Được kích hoạt khi xảy ra lỗi
oncontextmenu	Được kích hoạt khi người dùng nhấp phải chuột
onwheel	Được kích hoạt khi bánh xe chuột được xoay

Hãy xem một trong hành động:

<img src="image.jpg" onerror="this.src='default.jpg'">

Nếu hình ảnh không tải được, nó sẽ tự động chuyển sang hình ảnh mặc định. Đó giống như có một vũ công dự bị sẵn sàng bước vào!

Và thế là bạn đã có nó, các bạn! Bạn vừa bước những bước đầu tiên vào thế giới của các sự kiện HTML. Nhớ rằng, chìa khóa để thành thạo các sự kiện là thực hành. Hãy thử kết hợp các sự kiện khác nhau, thử nghiệm với các ý tưởng mới, và quan trọng nhất, hãy vui vẻ!

Như tôi luôn nói với học sinh của mình, lập trình giống như nấu ăn - bạn có thể làm rối loạn lần đầu, nhưng với sự thực hành, bạn sẽ nhanh chóng tạo ra những kiệt tác. Vậy, hãy tiếp tục chơi với các sự kiện này, và xem trang web của bạn sống động lên!

Credits: Image by storyset

Hướng Dẫn Trước:

HTML - Tham chiếu thuộc tính

Hướng Dẫn Tiếp Theo:

HTML - Tham chiếu Phông chữ