Tiếng Việt

Hướng dẫn cơ bản JavaScript

Toán tử JavaScript

Luồng điều khiển JavaScript

Hàm JavaScript

Đối tượng JavaScript

JavaScript Hướng đối tượng

Phiên bản JavaScript

Cookies JavaScript

JavaScript Trình duyệt BOM

API Web JavaScript

Sự kiện JavaScript

Xử lý lỗi JavaScript

Từ khóa quan trọng của JavaScript

JavaScript DOM HTML

JavaScript Khác

JavaScript - Đ делегирование событий

Xin chào các bạn học lập trình! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những kỹ thuật mạnh mẽ và hiệu quả nhất trong JavaScript: Đ делегирование событий (Event Delegation). Đừng lo lắng nếu bạn là người mới bắt đầu lập trình; tôi sẽ hướng dẫn bạn từng bước qua khái niệm này, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc thức uống yêu thích của bạn), và cùng nhau bắt đầu hành trình thú vị này nhé!

JavaScript - Event Delegation

什么是事件委托？

Trước khi chúng ta bước vào chi tiết, hãy hiểu Đ делегирование событий là gì. Hãy tưởng tượng bạn là một quản lý trong một văn phòng lớn. Thay vì tự mình phân công nhiệm vụ cho từng nhân viên, bạn ủy quyền trách nhiệm cho các trưởng nhóm, sau đó họ phân phối công việc. Đó chính là điều mà Đ делегирование событий làm trong JavaScript!

Đ делегирование sự kiện là một kỹ thuật mà chúng ta gắn một监听器 sự kiện duy nhất vào phần tử cha thay vì gắn nhiều监听器 sự kiện vào từng phần tử con. Điều này không chỉ làm cho mã của chúng ta hiệu quả hơn mà còn cho phép chúng ta xử lý các sự kiện trên các phần tử có thể không tồn tại khi trang tải lần đầu!

Tại sao sử dụng Đ делегирование sự kiện?

Bạn có thể đang tự hỏi, "Tại sao tôi nên quan tâm đến Đ делегирование sự kiện?" Well, hãy để tôi chia sẻ một câu chuyện nhỏ từ những ngày đầu dạy học của mình. Tôi từng có một học sinh tạo một ứng dụng danh sách công việc. Đối với mỗi nhiệm vụ, anh ấy thêm một监听器 sự kiện riêng. Đến khi anh ấy có 100 nhiệm vụ, ứng dụng của anh ấy chậm như một con ốc leo núi! Đó là khi tôi giới thiệu anh ấy đến với Đ делегирование sự kiện, và voilà! Ứng dụng của anh ấy chạy mượt như bơ.

Dưới đây là một số lợi ích chính:

  1. Hiệu suất: Ít监听器 sự kiện hơn đồng nghĩa với việc sử dụng ít bộ nhớ hơn và thời gian tải trang nhanh hơn.
  2. Phần tử động: Nó hoạt động với các phần tử được thêm vào DOM sau khi trang tải lần đầu.
  3. Ít mã hơn: Bạn viết ít mã hơn, điều này có nghĩa là ít cơ hội để lỗi creep vào.

Các bước của Đ делегирование sự kiện

Bây giờ chúng ta đã hiểu "tại sao", hãy cùng xem "làm thế nào". Đ делегирование sự kiện bao gồm ba bước chính:

1. Xác định phần tử cha

Đầu tiên, chúng ta cần chọn một phần tử cha sẽ đóng vai trò là người ủy quyền sự kiện. Phần tử này nên là phần tử chứa tất cả các phần tử con bạn muốn theo dõi.

2. Gắn监听器 sự kiện vào phần tử cha

Tiếp theo, chúng ta gắn监听器 sự kiện vào phần tử cha này.

3. Xác định phần tử nào đã kích hoạt sự kiện

Cuối cùng, khi một sự kiện xảy ra, chúng ta cần kiểm tra phần tử con cụ thể nào đã kích hoạt nó và phản hồi tương ứng.

Hãy cùng xem các bước này trong một số ví dụ mã!

Ví dụ Đ делегирование sự kiện

Ví dụ 1: Đ делегирование sự kiện cơ bản

Hãy bắt đầu với một danh sách không thứ tự các loại quả:

<ul id="fruitList">
<li>Táo</li>
<li>Chuối</li>
<li>Cherry</li>
</ul>

Thay vì thêm các sự kiện click vào từng <li>, chúng ta sẽ sử dụng Đ делегирование sự kiện:

document.getElementById('fruitList').addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
console.log("Bạn đã nhấp vào " + e.target.textContent);
}
});

Trong đoạn mã này:

  • Chúng ta gắn监听器 sự kiện vào phần tử cha <ul>.
  • Khi một click xảy ra, chúng ta kiểm tra nếu phần tử được nhấp (e.target) là một <li>.
  • Nếu đúng, chúng ta ghi lại nội dung text của phần tử <li> được nhấp.

Cách này, ngay cả khi chúng ta thêm nhiều loại quả vào danh sách sau này, xử lý sự kiện vẫn sẽ hoạt động mà không cần thêm mã!

Ví dụ 2: Tạo phần tử động

Hãy làm cho事情有趣 hơn một chút. Chúng ta sẽ tạo một danh sách công việc đơn giản nơi người dùng có thể thêm mới các mục:

<input type="text" id="newTodo">
<button id="addTodo">Thêm Công Việc</button>
<ul id="todoList"></ul>

Đây là đoạn mã JavaScript:

const todoList = document.getElementById('todoList');
const newTodo = document.getElementById('newTodo');
const addTodo = document.getElementById('addTodo');

addTodo.addEventListener('click', function() {
if(newTodo.value !== '') {
const li = document.createElement('li');
li.textContent = newTodo.value;
todoList.appendChild(li);
newTodo.value = '';
}
});

todoList.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
e.target.classList.toggle('completed');
}
});

Trong ví dụ này:

  • Chúng ta có thể thêm mới các mục công việc động.
  • Chúng ta sử dụng Đ делегирование sự kiện để xử lý các click trên tất cả các mục công việc, ngay cả những mục được thêm sau khi trang tải lần đầu.
  • Click vào một mục công việc sẽ chuyển đổi class 'completed'.

Ví dụ 3: Nhiều hành động với Đ делегирование sự kiện

Hãy nâng cấp danh sách công việc của chúng ta. Chúng ta sẽ thêm các nút để chỉnh sửa và xóa công việc:

<ul id="advancedTodoList"></ul>

Và đây là đoạn mã JavaScript được cải tiến:

const advancedTodoList = document.getElementById('advancedTodoList');

// Hàm tạo một mục công việc mới
function createTodoItem(text) {
const li = document.createElement('li');
li.innerHTML = `
<span>${text}</span>
<button class="edit">Chỉnh sửa</button>
<button class="delete">Xóa</button>
`;
advancedTodoList.appendChild(li);
}

// Đ делегирование sự kiện cho toàn bộ danh sách
advancedTodoList.addEventListener('click', function(e) {
const target = e.target;

if(target.className == 'delete') {
const li = target.parentNode;
advancedTodoList.removeChild(li);
} else if(target.className == 'edit') {
const span = target.previousElementSibling;
const newText = prompt("Chỉnh sửa công việc:", span.textContent);
if(newText !== null) {
span.textContent = newText;
}
}
});

// Thêm một số mục công việc ban đầu
createTodoItem("Học Đ делегирование sự kiện");
createTodoItem("Chinh phục JavaScript");

Trong ví dụ nâng cao này:

  • Chúng ta sử dụng một监听器 sự kiện duy nhất trên phần tử cha <ul> để xử lý cả hai hành động chỉnh sửa và xóa.
  • The event listener kiểm tra class của button clicked để xác định hành động.
  • Cách tiếp cận này khả thi và hiệu quả, bất kể chúng ta có bao nhiêu mục công việc.

Kết luận

Và thế là bạn đã có nó, các bạn học sinh yêu quý! Chúng ta đã cùng nhau hành trình qua vùng đất của Đ делегирование sự kiện, từ những khái niệm cơ bản đến những ứng dụng nâng cao. Nhớ rằng, giống như bất kỳ công cụ mạnh mẽ nào khác, Đ делегирование sự kiện tỏ ra hiệu quả nhất khi được sử dụng khôn ngoan. Nó không phải lúc nào cũng là giải pháp tốt nhất cho mọi tình huống, nhưng khi bạn làm việc với nhiều phần tử con hoặc nội dung được tạo động, nó thường là người bạn tốt nhất của bạn.

Trong hành trình lập trình tiếp theo của bạn, hãy tiếp tục thử nghiệm với các khái niệm này. Hãy thử kết hợp Đ делегирование sự kiện với các tính năng JavaScript khác mà bạn học được. Ai biết được? Bạn có thể tạo ra một ứng dụng web lớn thay đổi thế giới!

Đến bài học tiếp theo, chúc các bạn lập trình vui vẻ, và mong rằng các sự kiện của bạn luôn delegate mượt mà!

Credits: Image by storyset

Hướng Dẫn Trước:
JavaScript - Sự kiện Cửa sổ/ tài liệu
Hướng Dẫn Tiếp Theo:
JavaScript - Bong bóng sự kiện