07/09/2018, 14:44

Các sự kiện trong JavaScript

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, ...

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ý
  • ……….
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0