Nội dung

37.6 Event JS Sử dụng từ khóa 'this' để tối ưu hóa code - Thay đổi màu sắc cho các phần tử HTML

**Hướng dẫn JavaScript: Tối ưu hóa mã bằng từ khóa "this"** Trong video này, chúng ta sẽ khám phá cách tối ưu hóa mã JavaScript bằng cách sử dụng từ khóa "this". Mục tiêu của chúng ta là giảm thiểu sự lặp lại trong mã và làm cho nó dễ đọc hơn, hiệu quả hơn. Chúng ta sẽ thực hiện điều này bằng cách thay đổi màu nền và màu chữ của các phần tử HTML khi người dùng nhấp vào chúng. Đầu tiên, chúng ta sẽ viết một hàm để tạo màu ngẫu nhiên. Hàm này sẽ trả về một chuỗi màu theo định dạng `rgb` với ba giá trị ngẫu nhiên cho các thành phần màu đỏ, xanh lá cây và xanh dương. Đây là cách cơ bản để tạo ra các màu sắc ngẫu nhiên mỗi khi hàm được gọi. Tiếp theo, chúng ta sẽ chọn tất cả các phần tử HTML có lớp "btn" và "title" sử dụng phương thức `document.querySelectorAll`. Phương thức này trả về một NodeList chứa tất cả các phần tử phù hợp với selector đã cho. Chúng ta sẽ lặp qua danh sách các phần tử này và thêm sự kiện `click` cho mỗi phần tử. Trong đoạn mã ban đầu, chúng ta viết hai vòng lặp riêng biệt để thêm sự kiện `click` cho các phần tử "btn" và "title". Mỗi khi người dùng nhấp vào một trong các phần tử này, mã sẽ thay đổi màu nền và màu chữ của phần tử đó bằng cách gọi hàm `randomColor`. Tuy nhiên, cách tiếp cận này dẫn đến việc lặp lại mã, khi mà chúng ta phải viết hai đoạn mã gần như giống hệt nhau cho hai loại phần tử khác nhau. Điều này không chỉ làm cho mã dài dòng mà còn khó bảo trì. Nếu chúng ta muốn thay đổi cách xử lý sự kiện `click`, chúng ta phải chỉnh sửa cả hai đoạn mã. Để giải quyết vấn đề này, chúng ta sẽ viết một hàm riêng biệt có tên là `changeColor`. Hàm này sẽ thay đổi màu nền và màu chữ của phần tử đang được nhấp vào. Điều đặc biệt ở đây là chúng ta sẽ sử dụng từ khóa "this" trong hàm này. Trong ngữ cảnh của sự kiện, "this" sẽ tham chiếu đến phần tử HTML mà sự kiện `click` đã xảy ra. Bằng cách này, chúng ta có thể viết một hàm duy nhất và tái sử dụng nó cho cả hai loại phần tử. Cuối cùng, chúng ta sẽ gắn hàm `changeColor` làm trình xử lý sự kiện `click` cho cả hai danh sách phần tử "btn" và "title". Điều này làm cho mã của chúng ta ngắn gọn hơn và dễ hiểu hơn. Video này sẽ giúp bạn hiểu rõ hơn về cách sử dụng từ khóa "this" trong JavaScript và cách tối ưu hóa mã để làm cho nó hiệu quả hơn. Qua đó, bạn sẽ học được cách viết mã sạch hơn và dễ bảo trì hơn, điều này rất quan trọng trong việc phát triển web.