keypress i keyup - dlaczego kod klucza jest inny?

Question

pokrewne: JavaScript KeyCode vs CharCode

Oto kod można spróbować w domu albo w 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); 
}); 

Dlaczego keyCode inaczej?

Rozumiem, dlaczego należy używać tylko naciśnięcia klawisza, ale nie rozumiem, jak dwa kluczowe zdarzenia, przy tym samym naciśnięciu klawisza na klawiaturze, dają różne kody kluczy.

PS: Nie martwię się obsługą starszych przeglądarek, próbowałem tego w Chrome i byłem zaskoczony i nie mogłem znaleźć wytłumaczenia.

Answer 1

Zdarzenia mają zupełnie inne cele. Użyj keyup i keydown do identyfikacji kluczy fizycznych i keypress do identyfikacji wpisanych znaków. Oba są zasadniczo różnymi zadaniami z różnymi zdarzeniami; nie próbuj mieszać dwóch. W szczególności, zdarzenia keyCode na keypress są zwykle zbędne i nie powinny być używane (z wyjątkiem starszych IE, ale patrz dołączony dokument poniżej, aby dowiedzieć się więcej); w przypadku naciśnięć klawiszy, które można wydrukować, zwykle jest taki sam, jak which i charCode, chociaż istnieją pewne różnice między przeglądarkami.

Jan Wolter's article on key events, już połączone w innej odpowiedzi, jest ostateczne słowo na ten temat dla mnie i ma tablice opisujące to, co każdy z różnych właściwościach powraca do każdego rodzaju imprezy oraz klucza każdej przeglądarki.

Answer 2

Istnieje odpowiedź good article on quirksmode.org na to pytanie. Możesz również spojrzeć na Unixpapa's results.

Answer 3

Cóż, natknąłem się na jedną różnicę, gdy próbowałem skopiować wpis użytkownika z jednego wejścia formularza do innej części formularza, którą miałem zablokowaną dla mnie, aby użytkownicy mogli ją edytować. Stwierdziłem, że za każdym razem, gdy użytkownik przejdzie do następnej etykiety za pomocą klawisza po wprowadzeniu danych wejściowych, jeden wpis ostatniej klawiatury został pominięty w skopiowanym wpisie, gdy użyłem klawisza eventListener do naciśnięcia klawisza i zostało to rozwiązane przy użyciu klawisza keyup.

Więc podsumowując przy naciśnięciu słucha stanu w chwili, kiedy klawisz został naciśnięty, pomijając wynik naciśnięciem klawisza, natomiast keyup słucha stanu systemu po naciśnięciu przycisku i obejmuje wynik naciśnięcie.