nhấn và khóa - tại sao mã phím lại khác?

Question

liên quan: JavaScript KeyCode vs CharCode

Dưới đây là một số mã bạn có thể thử tại nhà hoặc tại một jsfiddle:

el.addEventListener('keyup', function(e) { 
    console.log('Keyup event'); 
    console.log(e.keyCode); 
}); 
el.addEventListener('keypress', function(e) { 
    console.log('Keypress event'); 
    console.log(e.keyCode); 
}); 

Tại sao keyCode khác nhau?

Tôi có thể hiểu tại sao người ta chỉ nên sử dụng nhấn phím, nhưng những gì tôi không hiểu là hai sự kiện quan trọng, được cung cấp cùng một phím nhấn trên bàn phím, cung cấp các mã phím khác nhau.

PS: Tôi không lo lắng về hỗ trợ trình duyệt cũ, tôi đã thử tính năng này trong Chrome và đã rất ngạc nhiên và không thể tìm thấy lời giải thích.

Answer 1

Sự kiện này dành cho các mục đích hoàn toàn khác nhau. Sử dụng keyup và keydown để xác định các khóa vật lý và keypress để xác định các ký tự đã nhập. Cả hai là các nhiệm vụ cơ bản khác nhau với các sự kiện khác nhau; đừng cố trộn lẫn cả hai. Cụ thể, keyCode trên keypress sự kiện thường là không cần thiết và không được sử dụng (ngoại trừ trong IE cũ hơn, nhưng xem tài liệu được liên kết bên dưới để biết thêm về điều đó); cho các phím bấm có thể in, thường là giống như which và charCode, mặc dù có một số biến thể giữa các trình duyệt.

Jan Wolter's article on key events, đã được liên kết trong câu trả lời khác, là từ dứt khoát về chủ đề này cho tôi và có bảng mô tả mỗi thuộc tính khác nhau trả về cho từng loại sự kiện chính và mỗi trình duyệt.

Answer 2

Có một số good article on quirksmode.org trả lời chính xác câu hỏi đó. Bạn cũng có thể muốn xem Unixpapa's results.

Answer 3

Vâng, tôi tình cờ gặp một sự khác biệt khi tôi đang cố gắng sao chép mục nhập của người dùng từ một đầu vào của biểu mẫu sang một số phần khác của biểu mẫu mà tôi đã khóa để người dùng chỉnh sửa. Những gì tôi thấy là, bất cứ khi nào người dùng chuyển sang nhãn tiếp theo bằng cách sử dụng phím khi hoàn thành đầu vào, một mục nhập bàn phím cuối cùng bị bỏ qua trong mục được sao chép khi tôi sử dụng eventListener để nhấn phím và điều này đã được giải quyết khi sử dụng khóa.

Vì vậy, trong kết luận bấm phím nghe bang tại ngay lập tức khi phím được nhấn, Gác lại những kết quả của phím nhấn, trong khi KeyUp lắng nghe tình trạng hệ thống sau khi chìa khóa đã được ép và bao gồm kết quả của phím bấm.