KeyboardEvent.keyCode obsoleto. O que isso significa na prática?

De acordo com o MDN, definitivamente não devemos usar a .keyCodepropriedade. Está obsoleto:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Na escola W3, esse fato é minimizado e há apenas uma nota lateral dizendo que .keyCodeé fornecido apenas para compatibilidade e que a versão mais recente da Especificação de eventos DOM recomenda o uso da .keypropriedade.

O problema é que .keynão há suporte para navegadores, então o que devemos usar? Tem algo que estou perdendo?

Você tem três maneiras de lidar com isso, conforme está escrito no link que você compartilhou.

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

você deve contemplá-los, esse é o caminho certo se você deseja suporte para vários navegadores.

Poderia ser mais fácil se você implementar algo assim.

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Além disso, todos os keyCode , which , charCode e keyIdentifier estão obsoletos:
charCodee keyIdentifiersão recursos não padrão.
keyIdentifieré removido a partir do Chrome 54 e o Opera 41.0
keyCoderetorna 0, no evento de pressionamento de tecla com caracteres normais no FF.

A propriedade principal :

 readonly attribute DOMString key

Contém um valor de atributo de chave correspondente à tecla pressionada

No momento em que este livro foi escrito, a keypropriedade era suportada por todos os principais navegadores a partir de: Firefox 52, Chrome 55, Safari 10.1, Opera 46. Exceto o Internet Explorer 11 que tem: identificadores de chave não padrão e comportamento incorreto com AltGraph. Mais informações
Se isso for importante e / ou a compatibilidade com versões anteriores for, você pode usar a detecção de recurso como no seguinte código:

Observe que o keyvalor é diferente de keyCodeou whichpropriedades porque: ele contém o nome da chave, não seu código. Se o seu programa precisa de códigos de caracteres, você pode fazer uso de charCodeAt(). Para caracteres únicos imprimíveis, você pode usar charCodeAt(), se estiver lidando com chaves cujos valores contenham vários caracteres, como as ArrowUp chances são: você está testando chaves especiais e executa as ações de acordo. Então, tentar implementar uma tabela de valores chaves e seus códigos correspondentes charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... e assim por diante, por favor dê uma olhada em valores-chave e seus códigos correspondentes

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */  

Pode ser que você queira considerar a compatibilidade com versões futuras, ou seja, usar as propriedades legadas enquanto estão disponíveis e apenas quando for descartado, mude para as novas:

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

Veja também: a documentação da KeyboardEvent.codepropriedade e mais alguns detalhes nesta resposta .

TLDR: Eu sugiro que você deve usar o novo event.keye event.codepropriedades em vez dos legados. O IE e o Edge oferecem suporte a essas propriedades, mas ainda não oferecem suporte aos novos nomes de chave. Para eles, há um pequeno polyfill que os torna a saída dos nomes de chave / código padrão:

https://github.com/shvaikalesh/shim-keyboard-event-key

Eu vim para esta pergunta procurando o motivo do mesmo aviso MDN como OP. Depois de pesquisar mais um pouco, o problema com keyCodese torna mais claro:

O problema do uso keyCodeé que os teclados que não são em inglês podem produzir saídas diferentes e até mesmo teclados com layouts diferentes podem produzir resultados inconsistentes. Além disso, houve o caso de

Se você leu as especificações W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

Na prática, keyCode e charCode são inconsistentes entre plataformas e até mesmo a mesma implementação em sistemas operacionais diferentes ou usando localizações diferentes.

Ele descreve em profundidade o que havia de errado com keyCode : https://www.w3.org/TR/uievents/#legacy-key-attributes

Esses recursos nunca foram especificados formalmente e as implementações atuais do navegador variam de maneiras significativas. A grande quantidade de conteúdo legado, incluindo bibliotecas de script, que depende da detecção do agente do usuário e da ação adequada significa que qualquer tentativa de formalizar esses atributos e eventos legados corre o risco de interromper tanto conteúdo quanto consertaria ou habilitaria. Além disso, esses atributos não são adequados para uso internacional, nem abordam questões de acessibilidade.

Então, depois de estabelecer o motivo pelo qual o keyCode legado foi substituído, vamos ver o que você precisa fazer hoje:

1. Todos os navegadores modernos oferecem suporte às novas propriedades ( keye code).
2. O IE e o Edge oferecem suporte a uma versão mais antiga da especificação, que possui nomes diferentes para algumas chaves. Você pode usar um calço para isso: https://github.com/shvaikalesh/shim-keyboard-event-key (ou enrole seu próprio - é bem pequeno de qualquer maneira)
3. O Edge corrigiu esse bug na versão mais recente (provavelmente será lançado em abril de 2018) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
4. Consulte a lista de chaves de eventos que você pode usar: https://www.w3.org/TR/uievents-key/

O MDN já forneceu uma solução:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Por exemplo, se você deseja detectar se a tecla "Enter" foi clicada ou não:

Ao invés de

event.keyCode === 13

Faça como

event.key === 'Enter'