Why 'keydown' event works like 'keypress' event?

javascript, jquery

Solution

The `keydown` event occurs when the key is pressed, followed immediately by the `keypress` event. Then the `keyup` event is generated when the key is released.

In order to understand the difference between `keydown` and `keypress`, it is useful to understand the difference between a "character" and a "key". A "key" is a physical button on the computer's keyboard while a "character" is a symbol typed by pressing a button. In theory, the `keydown` and `keyup` events represent keys being pressed or released, while the `keypress` event represents a character being typed. The implementation of the theory is not same in all browsers.

Problem

The next sample code outputs 'keydown' message many times while I hold a button down. The docs says that the keydown event happens once for one push of the button. So, the keydown event works like the keypress event in the next example. ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript'> function onLoad() { $( '#text' ).on( 'keydown', function() { console.info( 'keydown' ) } ); } </script> </head> <body onload='onLoad()'> <input type='text' id='text'> </body> </html> ``` I tested it on Windows, Firefox 19.0.2 and Google Chrome 25.0.1364.152. Also I created a fiddle (the problem can be reproduced). JQuery versions for which problem is reproduced: 1.8.2, 1.9.1. Update. I did realize the problem: How can I avoid autorepeated keydown events in JavaScript?.

Original source

Related problems