Khái niệm

Events (sự kiện) là một phần quan trọng để tương tác với người dùng và xử lý các hành động. JavaScript cung cấp một cách tiện lợi để gắn kết các hàm xử lý sự kiện với các thành phần trên trang web. 

Cách Sử Dụng Events

Để sử dụng một event trong JavaScript, chúng ta cần gắn kết một hàm xử lý sự kiện (event handler function) với một thành phần trên trang web. Có nhiều loại events khác nhau, như click, mouseover, keydown, và nhiều hơn nữa.

Dưới đây là một ví dụ đơn giản về việc sử dụng event:

//Giả xử ở HTML có button với id là myButton
let button = document.getElementById('myButton');

function handleClick() {
  console.log('Button đã được nhấn!');
}

button.addEventListener('click', handleClick);

Trong ví dụ trên, chúng ta đã gắn kết hàm handleClick với sự kiện click của một nút (button). Khi người dùng nhấn vào nút đó, hàm handleClick sẽ được gọi và in ra một thông báo trên console.

Xử Lý Events

Khi xử lý một event, chúng ta có thể truy cập các thông tin về sự kiện và thành phần gốc mà event xảy ra. Điều này cho phép chúng ta tương tác với dữ liệu và thay đổi các thuộc tính của thành phần.

function handleClick(event) {
  console.log('Button đã được nhấn!');
  console.log('Thông tin về sự kiện:', event);
  console.log('Thành phần gốc:', event.target);
}

button.addEventListener('click', handleClick);

Trong ví dụ trên, chúng ta đã thêm tham số event vào hàm handleClick. Thông qua tham số này, chúng ta có thể truy cập các thông tin về sự kiện, như event.target để lấy thành phần gốc của sự kiện.

Ví dụ với Code

Dưới đây là một số ví dụ về việc sử dụng và xử lý events trong JavaScript:

let button = document.getElementById('myButton');

function handleClick() {
  console.log('Button đã được nhấn!');
}

button.addEventListener('click', handleClick);

function handleMouseOver(event) {
  console.log('Con trỏ chuột đã đi qua nút!');
  console.log('Thông tin về sự kiện:', event);
}

button.addEventListener('mouseover', handleMouseOver);

function handleKeyPress(event) {
  console.log('Bạn đã nhấn phím:', event.key);
}

document.addEventListener('keydown', handleKeyPress);

Trong ví dụ trên, chúng ta đã sử dụng các events như click, mouseover, và keydown. Mỗi event được gắn kết với một hàm xử lý sự kiện tương ứng. Khi các sự kiện xảy ra, các hàm xử lý sự kiện được gọi và in ra thông tin tương ứng trên console.