Cách xử lý sự kiện (event handling) trong JavaScript

Xử lý sự kiện (event handling) là một khía cạnh quan trọng của lập trình JavaScript, cho phép bạn phản ứng và xử lý các tương tác của người dùng trên trang web. Dưới đây là một hướng dẫn về cách xử lý sự kiện trong JavaScript:

How to create an executable (.exe) file from JavaScript code (using Node.js) | by Uday Hiwarale | JsPoint | Medium

Table of Contents

Đăng ký sự kiện

Đầu tiên, bạn cần đăng ký sự kiện mà bạn muốn xử lý. Điều này có thể được thực hiện bằng cách sử dụng phương thức addEventListener của đối tượng DOM hoặc các thư viện như jQuery. Ví dụ:

const button = document.querySelector('.button');

button.addEventListener('click', function() { // Xử lý sự kiện click });

Viết hàm xử lý sự kiện

Tiếp theo, bạn cần viết một hàm để xử lý sự kiện khi nó xảy ra. Hàm này sẽ chứa mã JavaScript để thực hiện các hành động mong muốn. Ví dụ:

function handleClick() {

  // Xử lý sự kiện click

  console.log('Button clicked!');

}

button.addEventListener('click', handleClick);

Tham số sự kiện (event object)

Khi sự kiện xảy ra, JavaScript sẽ tự động truyền một tham số sự kiện (event object) cho hàm xử lý sự kiện. Tham số này chứa thông tin về sự kiện và các phương thức và thuộc tính để truy xuất thông tin liên quan. Ví dụ:

function handleClick(event) {

  // Xử lý sự kiện click

  console.log('Button clicked!', event.target);

}

button.addEventListener('click', handleClick);

Ngừng lan truyền sự kiện (event propagation)

Mặc định, sự kiện trong JavaScript được lan truyền từ phần tử mà nó xảy ra đến các phần tử cha. Điều này có thể gây ra xung đột và xử lý không mong muốn. Để ngừng lan truyền sự kiện, bạn có thể sử dụng phương thức stopPropagation(). Ví dụ:

function handleClick(event) {

  event.stopPropagation();

  // Xử lý sự kiện click

  console.log('Button clicked!', event.target);

}

Gỡ bỏ sự kiện (event removal)

Khi bạn không cần xử lý sự kiện nữa, hãy gỡ bỏ nó để tránh lãng phí tài nguyên và xung đột. Sử dụng phương thức removeEventListener để gỡ bỏ sự kiện đã đăng ký trước đó. Ví dụ:

button.removeEventListener('click', handleClick);

Sự kiện mặc định (default event)

Một số sự kiện như click và submit có hành vi mặc định đi kèm. Để ngăn chặn hành vi mặc định của sự kiện, bạn có thể sử dụng phương thức preventDefault(). Ví dụ:

function handleSubmit(event) {

  event.preventDefault();

  // Xử lý sự kiện submit

  console.log('Form submitted!');

}

Tricky Javascript code snippets asked in the interview | by Yogesh Chavan | Level Up Coding

Trên đây là một số khái niệm cơ bản về xử lý sự kiện trong JavaScript. Sử dụng các phương pháp này, bạn có thể tạo ra các tương tác tốt hơn và tăng tính tương tác của trang web của mình.

Tags: event handling JavaScript