Sự kiện Keydown trong Javascript là gì?

Có rất nhiều thông tin về các sự kiện bàn phím dựa trên trình duyệt, nhưng tôi không thể tìm thấy lời khuyên thiết thực cho các câu hỏi của mình trong một bài đăng mạch lạc duy nhất nên tôi nghĩ mình sẽ viết một số bài về chủ đề này, bắt đầu từ bài này. Tôi hy vọng sẽ cung cấp cho bạn (và cả tôi trong tương lai) nền tảng vững chắc và thông tin hữu ích. Có thể bản thân tương lai của chúng ta sẽ dành ít thời gian hơn để gỡ lỗi và có nhiều thời gian hơn để tạo ra những trải nghiệm tuyệt vời cho người dùng của chúng ta

Lời khuyên thiết thực đầu tiên mà tôi muốn đề cập đến là keydown có thể là sự kiện bàn phím duy nhất mà chúng tôi cần. Những người khác, ai cần họ? . Được rồi, có thể keyup sẽ được lên kệ để đề phòng, nhưng chắc chắn keypress có thể bị loại bỏ

Tại sao?

Hãy xem bắt đầu bằng việc hiểu những sự kiện bàn phím nào tồn tại ngày nay

Các sự kiện bàn phím là gì?

Dưới đây là ba sự kiện bàn phím được hỗ trợ bởi tất cả các trình duyệt chính, theo thứ tự chúng được kích hoạt

• keydown – kích hoạt khi bất kỳ phím nào được nhấn xuống, kích hoạt trước và luôn trước khi trình duyệt xử lý phím (e. g. chèn văn bản, di chuyển tiêu điểm, v.v.)
• keypress – kích hoạt khi một phím tạo ra giá trị ký tự được nhấn xuống, kích hoạt sau keydown và trước khi trình duyệt xử lý khóa
• keyup – kích hoạt khi bất kỳ phím nào được giải phóng, kích hoạt lần cuối và trình duyệt xử lý khóa

Mỗi sự kiện này đều có thể hủy bỏ và tạo bong bóng DOM, nhưng không phải tất cả chúng đều hữu ích như nhau

Keydown là sự kiện duy nhất bạn cần sử dụng

Theo kinh nghiệm của tôi, keydown là sự kiện bàn phím duy nhất đáng sử dụng, keypress hoàn toàn có thể bị bỏ qua và keyup rất thích hợp để bị bụi trên kệ

Tại sao?

Hãy cùng xem

Lý do sử dụng phím tắt

bảo hiểm chính

Keydown kích hoạt cho bất kỳ phím nào vì vậy nó sẽ cung cấp cho bạn phạm vi phủ sóng nhiều nhất của các phím được nhấn. Ví dụ: nó sẽ kích hoạt một phím tạo ký tự như “f”, một phím bổ trợ như “Shift”, các phím chức năng, v.v. Bạn sẽ không bao giờ bỏ lỡ sự kiện bàn phím cho một phím được nhấn bằng keydown

Có thể hủy

Một lý do khác cho keydown là nó kích hoạt trước khi trình duyệt xử lý khóa, do đó bạn có cơ hội hủy bỏ nó và/hoặc ngăn không cho nó nổi bọt thông qua DOM. Nếu bạn không muốn cho phép chèn chữ cái “f” vào – không vấn đề gì – chỉ cần hủy nó bằng cách sử dụng phương pháp keydown1 của sự kiện. Nếu bạn không muốn sự kiện lan rộng (hay còn gọi là bong bóng qua DOM) thì bạn có thể ngăn chặn điều đó bằng cách sử dụng phương pháp keydown2 của sự kiện

Nhất quán trên các trình duyệt

Một lý do khác để sử dụng keydown là nó kích hoạt nhất quán trên các trình duyệt. Điều này rất quan trọng vì như bạn sẽ sớm thấy, điều này không phải lúc nào cũng đúng đối với sự kiện liên quan chặt chẽ của nó. keypress

Nói về keypress, hãy xem tại sao chúng ta muốn tránh keypress tiếp theo

Lý do tránh nhấn phím

Thiếu bảo hiểm quan trọng

keydown7 kích hoạt sau keydown, nhưng vẫn trước khi trình duyệt xử lý khóa (e. g. chèn ký tự, di chuyển tiêu điểm, gửi biểu mẫu, v.v.). Bạn có thể hủy và ngừng tạo bọt cho các sự kiện keypress giống như bạn có thể làm với các sự kiện keydown, nhưng keypress chỉ kích hoạt cho một tập hợp con các khóa – các khóa tạo ra các giá trị ký tự – trong khi keydown kích hoạt cho tất cả các khóa. Vì vậy, các phím bổ trợ như keypress3, keypress4, keypress5, phím chức năng, v.v. sẽ không kích hoạt các sự kiện keypress

Điều này có thể đặt bạn vào tình huống mà bạn đang gỡ lỗi một cách không cần thiết cho keypress để không kích hoạt các sự kiện hoặc khi bạn đang quản lý cả hai sự kiện keypress và keydown. Tại sao có hai phương pháp nắm bắt các sự kiện quan trọng khi một phương pháp sẽ làm?

Không nhất quán giữa các trình duyệt

Nếu bạn vẫn chưa tin thì đây là một lý do khác để tránh keypress. Nó không được kích hoạt nhất quán trên các trình duyệt. Gì?. Tôi biết điều đó thật khó hiểu, nhưng Firefox sẽ kích hoạt sự kiện keypress khi nhấn keydown3 hoặc bất kỳ phím mũi tên nào, nhưng không có trình duyệt nào khác thực hiện việc này. Không Safari. Không phải Chrome. Không Opera. Thậm chí không có IE

không dùng nữa

Một lý do lớn để tránh keypress, và có lẽ tôi nên dẫn đầu với điều này, đó là keypress không được chấp nhận ở hiện tại

Loại sự kiện nhấn phím được xác định trong thông số kỹ thuật này để tham khảo và tính đầy đủ, nhưng thông số kỹ thuật này không chấp nhận việc sử dụng loại sự kiện này

Các thông số kỹ thuật của W3C đôi khi đi trước một chút và đôi khi chậm hơn một chút so với việc triển khai trình duyệt, vì vậy ở một nơi nào đó, điều này có thể có nghĩa là các trình duyệt sẽ loại bỏ keypress. Nó không có khả năng bất cứ lúc nào sớm mặc dù. Việc sử dụng nó quá phổ biến trong các trang web và ứng dụng được xây dựng từ giữa những năm 1990 đến nay. Tuy nhiên, đó là một dấu hiệu tốt cho thấy tất cả chúng ta nên ngừng sử dụng nó trong tương lai

RIP keypress

Với keypress hết cách, hãy chuyển sang phần lý do tại sao tốt nhất nên để keyup ngồi trên kệ, phủi bụi

Lý do gác phím

Hãy đối mặt với nó. keyup khá vô nghĩa

Các sự kiện bàn phím, keydown và keyup, độc lập với nhau. Trên thực tế, chúng kẹp trình duyệt thực hiện hành động mà người dùng sẽ thấy (e. g. chèn văn bản, xóa văn bản, đặt tiêu điểm cho phần tử có thể đặt tiêu điểm tiếp theo, v.v. )

Không có hành động mặc định

Nếu bạn hủy một sự kiện keydown, nó sẽ ngăn trình duyệt thực hiện hành động đó. Tuy nhiên, nó sẽ không ngăn keyup kích hoạt khi chìa khóa được nhấc lên. keyup5 là sự kiện riêng của nó. Bây giờ, giống như keydown, bạn cũng có thể hủy bỏ keyup, nhưng điều đó là vô nghĩa. Không có hành động mặc định nào được liên kết với keyup. Lần duy nhất bạn cần hủy nó là nếu có trình xử lý keyup tùy chỉnh mà bạn muốn ngăn không cho được gọi

Trừ khi bạn thực sự muốn biết rằng người dùng đã nhấc ngón tay khỏi phím mà họ đã nhấn – thực hay mô phỏng – keyup thực sự không có gì nhiều để cung cấp. Nó tạo ra một bộ thu bụi mịn

Và trong trường hợp bạn thấy cần nó, nó sẽ ở ngay đó, chờ được sử dụng

Tránh trộn phím xuống và nhấn phím

Sự kiện bàn phím là sự kiện độc lập trừ khi chúng không. Và với keydown và keypress thì không. Mười một lần trong số mười điều này làm cho việc trộn và kết hợp các sự kiện bàn phím trở nên phức tạp không cần thiết

Nếu bạn đang nghĩ đến việc sử dụng cả keydown và keypress thì tôi muốn khuyên bạn một lời khuyên. Đừng. Nếu bạn hiện đang sử dụng chúng thì lần tới khi bạn sử dụng mã đó, hãy cân nhắc chuyển mã keypress sang trình xử lý sự kiện akeydown, sau đó nhanh chóng xóa trình xử lý keypress

Việc sử dụng_______2_______không chỉ quan trọng vì nó không được dùng nữa, nó còn tạo ra nhiều công việc hơn cho bạn. Bất cứ điều gì bạn có thể làm với keypress bạn có thể làm với keydown. Đơn giản hơn nhiều khi chỉ có một loại sự kiện phải lo lắng. Điều này giảm thiểu sự phức tạp gây ra bởi những thứ như trình duyệt kích hoạt keypress không nhất quán và phải tính đến điều này trong mã ứng dụng

Và bạn thậm chí không nên sử dụng keypress. Bạn đã đọc phần trên – Lý do không dùng keyup – phải không?

Keydown và keyup hỗ trợ các tương tác phức tạp

Một điều thú vị về keydown và keyup không có ở keypress là khả năng hỗ trợ các tương tác phức tạp hơn giữa ứng dụng và người dùng. Nếu bạn là người dùng Slack, bạn có thể đã nhấn keypress7 hoặc keypress8 để chuyển bảng phím tắt. lưu ý bên lề. Slack được đóng gói như một ứng dụng gốc, nhưng nó thực sự là một ứng dụng dựa trên trình duyệt được cung cấp bên trong trình bao bọc Electron

Khi xem xét bài đăng này, đồng nghiệp của tôi Ben Beckwith đã đưa ra điều này trong một số phản hồi. Ông thậm chí còn chia sẻ một ví dụ đơn giản để minh họa điểm này

Giả sử bạn muốn chức năng như bảng phím tắt Slack. Bạn muốn người dùng có thể nhấn keypress8 để bật hộp bật lên hiển thị các phím tắt có sẵn để sử dụng trong ứng dụng. Trong tình huống này, keypress sẽ không liên quan nên bạn cần sử dụngkeydown hoặc keyup

Ví dụ này, có thể là giả tạo, là một ví dụ thực sự tuyệt vời về tính hữu dụng của keydown và keyup. Đối với keypress, nó đóng thêm một chiếc đinh vào quan tài

Tiếp tục nhấn phím

Nếu bạn đã đọc bài đăng này thì hy vọng bạn đã đi đến kết luận tương tự. keydown là người giữ, keypress bị ném ra ngoài, và keyup lên kệ. Nếu bạn không bị thuyết phục (hoặc khẳng định lại), đừng ngần ngại tweet cho tôi. Tôi luôn sẵn sàng kết hợp những quan điểm và thông tin mới vào suy nghĩ của riêng mình

Và nếu bạn đang tìm kiếm thêm thông tin về cách sử dụng các sự kiện này, API của chúng và các chi tiết đặc điểm kỹ thuật quan trọng của chúng thì đây là một vài tài liệu tham khảo hữu ích

Dưới đây là một số liên kết đến Mạng nhà phát triển Mozilla

• sự kiện keydown trên MDN
• sự kiện nhấn phím trên MDN
• sự kiện keyup trên MDN
• Sự kiện W3C DOM Cấp 3 / Giao diện người dùng

Trong các bài đăng tiếp theo, chúng ta sẽ xem xét các con trỏ nhảy và câu lệnh keyup9 phổ biến xuất hiện trong rất nhiều trình xử lý sự kiện

Sự kiện onkeydown giúp kích hoạt JavaScript là gì?

Onkeydown trong JavaScript là gì?

Sự khác biệt giữa keyup và keydown là gì?

Sự kiện nhấn phím trong JavaScript là gì?