Sự kiện trong Javascript

Mục tiêu bài viết Sự kiện trong Javascript là gì Hiểu và có thể sử dụng Sự kiện trong javascript Nội dung bài viết Sự kiện là những gì xảy ra với các phần tử HTML. Sự kiện HTML Dưới đây là một số ví dụ về các sự kiện: Một trang web được tải

Mục tiêu bài viết

  • Sự kiện trong Javascript là gì
  • Hiểu và có thể sử dụng Sự kiện trong javascript

Nội dung bài viết

Sự kiện là những gì xảy ra với các phần tử HTML.

Sự kiện HTML

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

  • Một trang web được tải xong
  • form, input thay đổi
  • button được click

Ví dụ 1 sự kiện onClick được gắn vào button

<button onclick="document.getElementById('demo').innerHTML = Date()">
  The time is?</button>

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

Trong ví dụ tiếp theo, chúng ta muôn thay đổi nội dung của phần tử của chính nút button.

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

Viết mã riêng trong phần script và gọi hàm

<buttononclick="displayDate()">The time is?</button><script>functiondisplayDate(){
    document.getElementById("demo").innerHTML =Date();}</script>

Các 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 The user moves the mouse over an HTML element
onmouseout Người dùng di chuyển chuột khỏi phần tử HTML
onkeydown Người dùng nhấn một phím bàn phím
onload Trình duyệt đã tải xong trang

Sự kiện Javascript có thể làm được những gì.

Ví dụ

  • Những việc nên làm mỗi khi tải trang
  • Những việc nên làm khi đóng trang
  • Hành động sẽ đượ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

Nguồn: viblo.asia

Bài viết liên quan

7 Cách Tăng Tốc Ứng Dụng React Hiệu Quả Mà Bạn Có Thể Làm Ngay

React là một thư viện JavaScript phổ biến trong việc xây dựng giao diện người d

Trung Quốc “thả quân bài tẩy”: hàng loạt robot hình người!

MỘT CUỘC CÁCH MẠNG ROBOT ĐANG HÌNH THÀNH Ở TRUNG QUỐC Thượng Hải, ngày 13/5 –

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con