Keypress и keyup - почему ключевой код отличается?

Связанный: JavaScript KeyCode vs CharCode

Вот какой код вы можете попробовать дома или в 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 );
} );

Почему ключевой код отличается?

Я могу понять, почему нужно использовать только keypress, но я не понимаю, как два ключевых события с одним и тем же нажатием клавиши на клавиатуре дают разные keyCodes.

PS: Я не беспокоюсь о поддержке старых браузеров, я пробовал это в Chrome и был удивлен, и не мог найти объяснения.

Ответы

Ответ 1

События предназначены для совершенно разных целей. Используйте keyup и keydown для идентификации физических ключей и keypress для идентификации типизированных символов. Эти две принципиально разные задачи с разными событиями; не пытайтесь смешивать их. В частности, события keyCode on keypress обычно являются избыточными и не должны использоваться (кроме более старого IE, но см. Связанный документ ниже для более подробного); для печатных клавиатур он обычно совпадает с which и charCode, хотя между браузерами существует некоторая разница.

Статья Яна Вольтера о ключевых событиях, уже связанная в другом ответе, является окончательным словом по этому вопросу для меня и содержит таблицы, описывающие, что каждое из свойств возвращается для каждого типа ключевых событий и каждого браузера.