Sự kiện (Event) trong JavaScript

Sự kiện (Event) trong JavaScript là các hành động hoặc xảy ra mà trang web hoặc trình duyệt có thể nhận diện và phản hồi lại. Các sự kiện có thể là tương tác của người dùng (như nhấp chuột, nhập liệu) hoặc các sự kiện tự động (như tải trang, thay đổi kích thước cửa sổ).

Cách thêm sự kiện trong JavaScript#

Có nhiều cách để thêm sự kiện vào phần tử HTML trong JavaScript:

• Sử dụng thuộc tính HTML: <button onclick="alert('Button clicked!')">Click me</button>

• Sử dụng thuộc tính DOM: let btn = document.getElementById('myButton'); btn.onclick = function() { alert('Button clicked!'); };

• Sử dụng phương thức addEventListener (Khuyến khích): let btn = document.getElementById('myButton'); btn.addEventListener('click', function() { alert('Button clicked!'); });

Các loại sự kiện phổ biến#

• Sự kiện chuột (Mouse Events): click: Khi phần tử được nhấp.

  • dblclick: Khi phần tử được nhấp đúp.

  • mouseover: Khi con trỏ di chuột vào phần tử.

  • mouseout: Khi con trỏ rời khỏi phần tử.

  • mousemove: Khi con trỏ di chuyển trong phần tử.

  • mousedown: Khi nhấn nút chuột xuống.

  • mouseup: Khi nhả nút chuột ra.

• Sự kiện bàn phím (Keyboard Events): keydown: Khi nhấn phím xuống.

  • keyup: Khi nhả phím ra.

  • keypress: Khi nhấn phím xuống (phím ký tự).

• Sự kiện Form (Form Events): submit: Khi biểu mẫu được gửi đi.

  • change: Khi giá trị của phần tử input, select, hoặc textarea thay đổi.

  • focus: Khi phần tử nhận được focus.

  • blur: Khi phần tử mất focus.

• Sự kiện tài liệu và cửa sổ (Document and Window Events): load: Khi tài liệu hoặc hình ảnh được tải hoàn toàn.

  • resize: Khi kích thước cửa sổ thay đổi.

  • scroll: Khi tài liệu hoặc phần tử bị cuộn.

  • DOMContentLoaded: Khi nội dung HTML ban đầu được tải và phân tích cú pháp.

Ví dụ về sử dụng sự kiện#

• Sự kiện click: ` Click me

  `

• Sự kiện keydown: `

  `

• Sự kiện submit: `

  Submit
  `

• Sự kiện load: `

  `

Sự kiện tùy chỉnh#

Bạn cũng có thể tạo và phát các sự kiện tùy chỉnh: ` let event = new Event('myCustomEvent');

document.addEventListener('myCustomEvent', function() { console.log('Custom event triggered!'); });

// Phát sự kiện tùy chỉnh document.dispatchEvent(event); `

Sự kiện là một phần quan trọng của lập trình JavaScript, giúp tạo ra các ứng dụng web tương tác và linh hoạt. Bằng cách hiểu và sử dụng sự kiện một cách hiệu quả, bạn có thể nâng cao trải nghiệm người dùng và tạo ra các chức năng phong phú cho trang web của mình.