常用键盘事件

1551318122855.png
1551318160371.png

  1. <script>
  2. // 常用的键盘事件
  3. //1. keyup 按键弹起的时候触发
  4. document.addEventListener('keyup', function() {
  5. console.log('我弹起了');
  6. })
  7. //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
  8. document.addEventListener('keypress', function() {
  9. console.log('我按下了press');
  10. })
  11. //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
  12. document.addEventListener('keydown', function() {
  13. console.log('我按下了down');
  14. })
  15. // 4. 三个事件的执行顺序 keydown -- keypress -- keyup
  16. </script>

键盘事件对象

1551318355505.png
1551318404238.png

  1. <script>
  2. // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
  3. document.addEventListener('keyup', function(e) {
  4. console.log('up:' + e.keyCode);
  5. // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
  6. if (e.keyCode === 65) {
  7. alert('您按下的a键');
  8. } else {
  9. alert('您没有按下a键')
  10. }
  11. })
  12. document.addEventListener('keypress', function(e) {
  13. // console.log(e);
  14. console.log('press:' + e.keyCode);
  15. })
  16. </script>