Javascript Event

08/07/2019

Bài sau » « Bài trước

HTML Events

Các sự kiện HTML là "những việc" xảy ra với các thẻ HTML.

Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng - react" với các sự kiện này.

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

Dưới đây là 1 số ví dụ về HTML event:

  • Khi trang web loading xong
  • Giá trị thẻ input vừa thay đổi
  • Một button vừa được click

Javascript cho phép thực thi code khi phát hiện các sự kiện.

HTML cho phép các thuộc tính xử lý sự kiện, bằng cách viết trực tiếp vào thẻ HTML:

<element event='Code JavaScript'> // Hoặc dùng dấu nháy kép <element event="Code JavaScript">

Xem ví dụ bên dưới, thuộc tính onclick được viết vào thẻ <button>

<p id='demo'></p> <button onclick="document.getElementById('demo').innerHTML = Date()">Bây giờ là mấy giờ ?</button>

Đối với ví dụ ở trên, Javascript code thay đổi nội dung của thẻ p có id="demo".

Ví dụ tiếp theo, Đoạn code thay đổi nội dung của chính nó (sử dụng this.innerHTML)

<button onclick="this.innerHTML = Date()">Bây giờ là mấy giờ ?</button>

Các code Javascript thường viết nhiều dòng. Nên phổ biến hơn là ta gọi function

<button onclick="displayDate()">Bây giờ là mấy giờ ?</button>

Các HTML events phổ biến

Dưới đây là danh sách các sự kiện phổ biến:

Sự kiệnMô tả
onchangeThẻ HTML đã thay đổi
onclickNgười dùng click vào thẻ HTML.
onmouseoverNgười dùng di chuyển chuột qua phần tử HTML
onmouseoutNgười dùng di chuyển chuột ra khỏi phần tử HTML
onkeydownNgười dùng nhấn bàn phím
onloadTrình duyệt đã tải xong trang

Javascript có thể làm gì ?

Quản lý các sự kiện như user input, user action, browser action,... :

  • Những việc cần thực hiện khi trang load xong
  • Những việc cần thực hiện khi đóng trang
  • Hành động được thực hiện khi người dùng nhấp vào nút
  • Nội dung cần được xác minh khi người dùng nhập dữ liệu
  • ....

Nhiều phương thức khác nhau có thể được sử dụng để cho phép JavaScript hoạt động với các sự kiện:

  • Thuộc tính sự kiện HTML có thể thực thi mã JavaScript trực tiếp
  • Thuộc tính sự kiện HTML có thể gọi các hàm JavaScript
  • Bạn có thể gán các hàm xử lý sự kiện của riêng mình cho các phần tử HTML
  • Bạn có thể ngăn các sự kiện được gửi hoặc xử lý
  • ....


Bài sau » « Bài trước
Back to top