Các sự kiện trong JavaScript

Các sự kiện trong HTML là “cái gì đó” xảy ra với phần tử HTML.

Khi JavaScript được sử dụng trong trang HTML, Javascript có thể “phản ứng” lại các sự kiện này.


Các sự kiện HTML

Một sự kiện trong HTML có thể là cái gì đó do trình duyệt tạo ra hoặc do người dùng tạo.

Dưới đây là một vài ví dụ về sự kiện trong HTML:

  • Một trang HTML hoàn tất quá trình tải;
  • Một trường input trong HTML thay đổi;
  • Một nút bấm trong HTML được click;

Thường, khi sự kiện xảy ra, bạn có thể muốn làm điều gì đó.

JavaScript có thể giúp bạn thực thhi đoạn code khi các sự kiện được ghi nhận có mặt.

HTML cho phép sự kiện xử lý thuộc tính, với đoạn mã JavaScript, được thêm vào trong phần tử HTML.

Với dấu nháy đơn:

<some-HTML-element some-event='some JavaScript'>

Với dấu nháy kép:

<some-HTML-element some-event="some JavaScript">

Trong ví dụ tiếp theo, một thuộc tính onclick (với code), thêm một phần tử nút bấm:

Ví dụ

<button onclick='getElementById("demo").innerHTML=Date()'>Thời gian là?</button>

Kết quả:


Trong ví dụ trên, JavaScript thay đổi nội dung của phần tử có id="demo".

Trong ví dụ kế dưới đây, đoạn mã sẽ thay đổi nội dung của của chính nó (sử dụng this.innerHTML):

Ví dụ:

<button onclick="this.innerHTML=Date()">Thời gian là?</button>

Kết quả:


Các mã JavaScript thường chỉ dài có vài dòng. Điều đó là phổ biến để thấy thuộc tính sự kiện gọi các hàm:

Ví dụ:

<button onclick="displayDate()">Thời gian là?</button>

Kết quả:


Các sự kiện HTML phổ biến

Đây là danh sách các sự kiện HTML phổ biến:

Sự kiệnMô tả
onchangeMột phần tử HTML nào đó thay đổi
onclickNgười dùng click vào phần tử HTML
onmouseoverNgười dùng đưa chuột qua phần tử HTML
onmouseoutNgười dùng di chuyển chuột thoát khỏi phần tử HTML
onkeydownNgười dùng nhấn bàn phím nào đó
onloadTrình duyệt hoàn tất tải trang

Danh sách này dài hơn rất nhiều: Chúng tôi có thư mục các sự kiện JavaScript HTML DOM để các bạn tham khảo.


JavaScript có thể làm được gì

Xử lý sự kiện có thể được dùng để xử lý và xác nhận thông tin người dùng nhập, hoạt động của người dùng và các hoạt động của trình duyệt:

  • Những điều nên được thực hiện mỗi khi trang được tải;
  • Những điều nên được thực hiện mỗi khi trang đóng;
  • Hành động nên được thực thi khi người dùng click vào một nút;
  • Nội dung nên được xác nhận / chuẩn hoá khi người dùng nhập dữ liệu;
  • Và nhiều điều khác nữa …

Có rất nhiều phương thức có thể sử dụng để JavaScript làm việc với các sự kiện:

  • Các sự kiện thuộc tính HTML có thể thực thi mã JavaScript một cách trực tiếp;
  • Các sự kiện thuộc tính HTML có thể gọi hàm JavaScript;
  • Bạn có thể gán hàm xử lý sự kiện của bạn vào phần tử HTML;
  • Bạn có thể ngăn cản các sự kiện được gửi hoặc xử lý;
  • Và nhiều hơn nữa…

Bạn có thể học được nhiều hơn về sự kiện và xử lý sự kiện trong chương DOM HTML của chúng tôi.

Leave a Comment