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 trong lập trình JavaScript, cho phép bạn tương tác và phản hồi với hành vi của người dùng và các sự kiện diễn ra trên trang web. Trong bài viết này, chúng ta sẽ tìm hiểu cách xử lý sự kiện trong JavaScript.

Pink Beach Wallpapers - Top Free Pink Beach Backgrounds - WallpaperAccess

Table of Contents

Gắn sự kiện cho phần tử HTML

Để gắn một sự kiện cho một phần tử HTML, chúng ta sử dụng phương thức addEventListener() hoặc gán trực tiếp một hàm cho thuộc tính sự kiện của phần tử. Ví dụ:

// Sử dụng addEventListener()

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

button.addEventListener('click', function() {

  console.log('Button clicked!');

});

// Gán hàm trực tiếp const input = document.getElementById('myInput'); input.onclick = function() { console.log('Input clicked!'); };

Xử lý sự kiện trong hàm

Khi sự kiện được kích hoạt, JavaScript gọi đến hàm xử lý (event handler) tương ứng. Hàm xử lý có thể là một hàm được định nghĩa trực tiếp hoặc một hàm đã tồn tại trước đó. Ví dụ:

function handleClick() {

  console.log('Button clicked!');

}

const button = document.getElementById('myButton'); button.addEventListener('click', handleClick);

Truyền tham số cho hàm xử lý

Bạn có thể truyền các tham số cho hàm xử lý sự kiện bằng cách sử dụng một hàm trung gian hoặc sử dụng bind(). Ví dụ:

function handleClick(event) {

  console.log('Button clicked!');

  console.log('Event:', event);

}
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {

  handleClick(event, 'param1', 'param2');

});

// Sử dụng bind() const input = document.getElementById('myInput'); input.addEventListener('change', handleClick.bind(null, 'param1', 'param2'));

Xóa sự kiện

Để xóa một sự kiện, bạn có thể sử dụng phương thức removeEventListener() hoặc gán giá trị null cho thuộc tính sự kiện. Ví dụ:

function handleClick() {

  console.log('Button clicked!');

}
const button = document.getElementById('myButton');

button.addEventListener('click', handleClick);
// Xóa sự kiện bằng removeEventListener()

button.removeEventListener('click', handleClick);

// Xóa sự kiện bằng gán giá trị null button.onclick = null;

Ngăn chặn hành vi mặc định

Trong một số trường hợp, bạn muốn ngăn chặn hành vi mặc định của một sự kiện, chẳng hạn như việc submit form hoặc chuyển hướng trang. Bạn có thể sử dụng phương thức preventDefault() để làm điều này. Ví dụ:

const link = document.getElementById('myLink');

link.addEventListener('click', function(event) {

  event.preventDefault();

  console.log('Link clicked! Default behavior prevented.');

});

170 Desktop Wallpaper ideas in 2023 | desktop wallpaper, macbook wallpaper, laptop wallpaper

Trên đây là một số cách cơ bản để xử lý sự kiện trong JavaScript. Việc hiểu và áp dụng chúng sẽ giúp bạn tạo ra các trang web tương tác và phản hồi với người dùng một cách linh hoạt và mạnh mẽ.

Tags: event handling JavaScript