Nội dung

37.13 Event JS: Event Delegation trong JavaScript _ Quản Lý Sự Kiện Trong JS Với Event Delegation

Trong video này, chúng ta sẽ khám phá một khía cạnh quan trọng của JavaScript liên quan đến sự kiện (event) - đó là event delegation. Chúng ta sẽ thực hiện các bước sau để tạo và quản lý các sự kiện trên các phần tử động trong HTML. Đầu tiên, chúng ta sẽ học cách ngăn chặn hành vi mặc định của form khi người dùng nhấn nút submit. Hành vi mặc định của form là gửi dữ liệu và tải lại trang, nhưng trong trường hợp này, chúng ta muốn xử lý dữ liệu trên trang hiện tại mà không tải lại trang. Chúng ta sẽ sử dụng phương thức `e.preventDefault()` để đạt được điều này. Tiếp theo, chúng ta sẽ xử lý sự kiện submit của form để thêm một phần tử mới vào danh sách (ul). Khi người dùng nhập thông tin vào các ô input và nhấn submit, chúng ta sẽ lấy giá trị của các ô input và tạo một phần tử mới (li) chứa thông tin này. Sau đó, chúng ta sẽ thêm phần tử mới này vào danh sách hiện có và reset form để người dùng có thể nhập dữ liệu mới. Một vấn đề thường gặp khi làm việc với các phần tử động là các sự kiện không tự động gán cho các phần tử mới được thêm vào. Ví dụ, nếu chúng ta chỉ gán sự kiện click cho các phần tử li có sẵn khi trang tải lần đầu, thì các phần tử li mới được thêm vào sau đó sẽ không có sự kiện này. Để giải quyết vấn đề này, chúng ta sẽ sử dụng event delegation. Event delegation cho phép chúng ta gán một sự kiện cho một phần tử cha chứa các phần tử con mà chúng ta muốn quản lý. Khi sự kiện xảy ra trên phần tử con, sự kiện sẽ nổi lên (bubble) qua các phần tử cha, và chúng ta có thể xử lý sự kiện này ở cấp độ phần tử cha. Trong ví dụ này, chúng ta sẽ gán sự kiện click cho phần tử ul chứa các phần tử li. Khi người dùng click vào bất kỳ phần tử li nào, sự kiện sẽ nổi lên đến phần tử ul và chúng ta có thể xử lý sự kiện này tại đó. Bằng cách này, các phần tử li mới thêm vào cũng sẽ có sự kiện click mà không cần phải gán lại sự kiện cho từng phần tử riêng lẻ. Cuối cùng, chúng ta sẽ kiểm tra xem phần tử được click có phải là thẻ li hay không bằng cách sử dụng thuộc tính `tagName`. Nếu đúng, chúng ta sẽ xoá phần tử này khỏi danh sách. Thông qua video này, bạn sẽ hiểu rõ hơn về cách làm việc với sự kiện trong JavaScript, cách ngăn chặn hành vi mặc định của form, cách thêm phần tử động vào danh sách, và cách sử dụng event delegation để quản lý sự kiện trên các phần tử động. Đây là những kỹ thuật quan trọng giúp bạn xây dựng các ứng dụng web tương tác và mạnh mẽ hơn. Hãy theo dõi và thực hành cùng chúng tôi để nắm vững các khái niệm này!