Các sự kiện trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Các sự kiện trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Sự kiện HTML là “sự kiện” xảy ra với các phần tử HTML. Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể “tác động trở lại” với những sự kiện này.

Sự kiện HTML

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

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

  • Một trang HTML đã tải xong
  • Trường đầu vào HTML đã được thay đổi
  • Một nút HTML đã được nhấp

Thông thường, khi các sự kiện xảy ra, bạn có thể muốn làm điều gì đó. JavaScript cho phép bạn thực thi dòng lệnh khi sự kiện được thực thi.

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

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

<element event=some JavaScript>

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

<element event=some JavaScript>

Trong ví dụ sau, một thuộc tính onclick (với mã), được thêm vào một phần tử button:

<button onclick=”document.getElementById(‘demo’).innerHTML = Date()”>The time is?</button>

Trong ví dụ trên, mã JavaScript sẽ thay đổi nội dung của phần tử với id = “demo”. Trong ví dụ tiếp theo, mã sẽ thay đổi nội dung của phần tử riêng của nó (sử dụng this.innerHTML):

<button onclick=”this.innerHTML = Date()”>The time is?</button>

Mã JavaScript thường dài một vài dòng. Nó phổ biến hơn để xem các thuộc tính sự kiện gọi các hàm.

Ví dụ:

<button onclick=”displayDate()”>The time is?</button>

Sự kiện HTML chung

Dưới đây là danh sách một số sự kiện HTML phổ biến:

Sự kiện Mô tả
onchange Một phần tử HTML đã được thay đổi
onclick Người dùng nhấp vào một phần tử HTML
onmouseover Người dùng di chuyển chuột qua một phần tử HTML
onmouseout Người dùng di chuyển chuột ra khỏi một phần tử HTML
onkeydown Người dùng nhấn vào bàn phím
onload Trình duyệt đã hoàn tất tải trang

Ứng dụng trong JavaScript

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

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

Có thể sử dụng nhiều phương pháp khác nhau để làm việc 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 hàm JavaScript
  • Bạn có thể gán các hàm xử lý sự kiện của riêng bạn cho các phần tử HTML
  • Bạn có thể ngăn sự kiện được gửi đi hoặc bị xử lý
  • ……….