Nội dung

37.7 Event JS Event Object and keyboard events trong JavaScript - Tất cả những điều bạn cần biết

Trong video này, chúng ta sẽ tìm hiểu về cách xử lý các sự kiện bàn phím trong JavaScript. Đầu tiên, chúng ta sẽ khám phá các sự kiện cơ bản liên quan đến bàn phím như "keydown" và "keyup". Chúng ta sẽ thấy cách sử dụng các sự kiện này để theo dõi khi nào người dùng nhấn và thả phím trên bàn phím. Tiếp theo, chúng ta sẽ tìm hiểu về đối tượng sự kiện, một khái niệm quan trọng khi làm việc với các sự kiện trong JavaScript. Đối tượng sự kiện chứa thông tin chi tiết về sự kiện đã xảy ra, bao gồm loại sự kiện, phím nào được nhấn, và mã phím tương ứng. Chúng ta sẽ khám phá cách lấy và sử dụng thông tin này bằng cách sử dụng tham số của hàm callback trong sự kiện "keydown". Một ví dụ cụ thể trong video là thay đổi màu nền của trang web khi người dùng nhấn một phím cụ thể. Chúng ta sẽ thiết lập sự kiện "keydown" trên đối tượng document để theo dõi tất cả các phím nhấn trên trang. Khi người dùng nhấn phím "r", mã JavaScript sẽ thay đổi màu nền của body sang màu cyan. Video này sẽ giúp bạn nắm vững các khái niệm cơ bản về sự kiện bàn phím trong JavaScript, cũng như cách sử dụng đối tượng sự kiện để tạo ra các tương tác phong phú và phản ứng nhanh chóng với hành động của người dùng. Chúng ta sẽ đi qua từng bước chi tiết, giúp bạn hiểu rõ cách làm việc với các sự kiện này và áp dụng chúng vào dự án thực tế. Chúng ta sẽ bắt đầu bằng việc tạo một ô input trên trang web và thiết lập sự kiện "keydown" để ghi nhận khi người dùng nhấn bất kỳ phím nào. Bạn sẽ thấy ngay lập tức thông báo "KEYDOWN!" xuất hiện trong console khi phím được nhấn. Sau đó, chúng ta sẽ thêm sự kiện "keyup" để theo dõi khi phím được thả ra, và console sẽ hiển thị thông báo "KEYUP!". Tiếp theo, chúng ta sẽ làm rõ hơn về đối tượng sự kiện bằng cách ghi nhận toàn bộ đối tượng này trong console. Điều này sẽ cho bạn cái nhìn tổng quát về các thông tin mà đối tượng sự kiện chứa đựng, chẳng hạn như loại sự kiện, phím nào được nhấn, và vị trí của con trỏ chuột tại thời điểm xảy ra sự kiện. Sau đó, chúng ta sẽ tập trung vào hai thuộc tính quan trọng của đối tượng sự kiện: "key" và "code". "Key" là tên của phím mà người dùng đã nhấn, trong khi "code" là mã phím tiêu chuẩn. Điều này rất hữu ích khi bạn cần phân biệt giữa các phím có cùng ký tự nhưng khác vị trí, chẳng hạn như phím "r" trên bàn phím thông thường và phím "r" trên bàn phím số. Cuối cùng, chúng ta sẽ áp dụng những gì đã học để thực hiện một ví dụ cụ thể: thay đổi màu nền của trang web khi người dùng nhấn phím "r". Bạn sẽ thấy cách thiết lập sự kiện "keydown" trên document và cách kiểm tra thuộc tính "code" của đối tượng sự kiện để xác định phím nào được nhấn. Nếu phím "r" được nhấn, chúng ta sẽ thay đổi màu nền của body sang màu cyan. Video này không chỉ giúp bạn nắm vững lý thuyết về sự kiện bàn phím mà còn cung cấp các ví dụ thực tế và hướng dẫn chi tiết để bạn có thể tự tin áp dụng kiến thức vào các dự án của mình. Hy vọng rằng sau khi xem video, bạn sẽ hiểu rõ hơn về cách làm việc với các sự kiện bàn phím trong JavaScript và có thể tạo ra các tương tác phong phú hơn cho trang web của mình.