JS 12 – Sự kiện và đối tượng form

0
103

Sự kiện trong Javascript có thể hiểu đơn giản là những thao tác chuột trên văn bản HTML như.

  • Click chuột
  • Tải lại một trang web hoặc hình ảnh
  • Di chuyển chuột qua một vị trí nào đó của trang web
  • Lựa chọn một ô nhập liệu từ HTML
  • Nhấn một tổ hợp phím

….

1. Cách gọi sự kiện

Để gọi sự kiện vào phần tử html chúng ta sử dụng cú pháp sau

Ví dụ để thêm sự kiện onclick vào thẻ div

See the Pen LjrooL by Cao Anh Nhất (@xeko995) on CodePen.dark

2. Sự kiện với phần tử HTML

2.1. Sự kiện Onclick

Sự kiện Onclick mô tả hành động bấm chuột vào bất cứ phần tử HTML nào mà ta gọi sự kiện vào.

Cú pháp

Ví dụ:

Khi click vào nút button thì hiện thị hộp thoại “Học viện công nghệ VietPro”.

See the Pen RZJmXy by Cao Anh Nhất (@xeko995) on CodePen.dark

2.2. Sự kiện OnMouseOver

Sự kiện OnMouseOver mô tả hành động rê chuột lên một phần tử HTML nào

Cú pháp

See the Pen PKarYy by Cao Anh Nhất (@xeko995) on CodePen.dark

2.3. Sự kiện OnMouseOut

Trái với sự kiện OnMouseOver thì sự kiện OnMouseOut mô tả hành động di chuột ra khỏi phần tử HTML bất kỳ.

Cú pháp

Ví dụ

See the Pen OjEeJa by Cao Anh Nhất (@xeko995) on CodePen.dark

3. Sự kiện đối với DOCUMENT  (Các tài liệu HTML)

3.1. Sự kiện OnLoad

Tương tự các ngôn ngữ lập trình khác , javascript sẽ chạy biên dịch từ trên xuống và từ trái sang phải . Chính vì vậy khi bạn sử dụng một hàm mà phía trên nó không tồn tại hàm đó thì sẽ bị lỗi ngay. Để giải quyêt vấn đề này chúng ta sử dụng sự kiện onload.

Sự kiện onload có ý nghĩa  rằng khi trình duyệt đã load xong mọi thứ image, js, css… thì những đoạn code bên trong đó mới được chạy.

Cú pháp

Ví dụ

See the Pen GvGbZY by Cao Anh Nhất (@xeko995) on CodePen.dark

3.2. Sự kiện onResize

Sự kiện onResize mô tả trạng thái khi thay đổi khung hiện thị trình duyệt

Cú pháp

Ví dụ

See the Pen Yxvopv by Cao Anh Nhất (@xeko995) on CodePen.dark

4. Sự kiện đối với phần tử của form

4.1. Sự kiện Onsubmit

Sự kiện OnSubmit mô tả trạng thái khi gửi dữ liệu trong Form qua nút Submit

Cú pháp

Ví dụ

See the Pen LjrKWQ by Cao Anh Nhất (@xeko995) on CodePen.dark

4.2. Sự kiện onChange

Sự kiện onChange mô tả trạng thái khi thay đổi giá trị của một phần tử Form

Cú pháp

Ví dụ bạn thay đổi giá trị trong ô input sẽ hiện lên thông báo

See the Pen wqXLqV by Cao Anh Nhất (@xeko995) on CodePen.dark

4.3. Sự kiện onFocus

Sự kiện onFocus mô tả trạng thái của một phần tử form khi bị kích hoạt

Cú pháp

Ví dụ

See the Pen EvRBow by Cao Anh Nhất (@xeko995) on CodePen.dark

Xem thêm các bài học javascript cơ bản khác tại đây

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here