js中keyup-keypress-keydown以及oninput四个事件

原创 FGstudy 最后发布于2019-10-01 17:25:13 阅读数 90 收藏

发布于2019-10-01 17:24:58

分类专栏： 随笔

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/FGstudy/article/details/101854125

展开

关于js中keyup, keypress, keydown以及oninput四个事件

基本知识

简述

1. keydown事件：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
2. keypress事件：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
3. keyup事件：当用户释放键盘上的键时触发。
4. oninput事件：在 <input> 或 <textarea> 元素的值发生改变时触发
   后面的内容在首页不显示，请点击下方的展开全文或者

具体触发效果

测试代码

//测试keyup, keypress, keydown以及oninput四个事件的触发机制

<div class="wrapper">
  <input id="input" type="text">
</div>

<script>
  var input = document.getElementById("input");
  input.addEventListener("keyup",function(){
    console.log('event handle keyup');
  });
  input.addEventListener("keydown",function(){
    console.log('event handle keydown');
  });
  input.addEventListener("keypress",function(){
    console.log('event handle keypress');
  });
  input.addEventListener("input",function(){
    console.log('event handle input');
  });
			
</script>

效果（在英文输入法下，暂不考虑中文输入法下的情况）

1. 当按下单个字符键时，依次触发keydown-keypress-input-keyup四个事件
2. 如果按回车键，依次触发keydown-keypress-keyup，注意没有触发input事件
3. 如果按非字符键如方向键、ESC键、f1-f12等，依次触发keydown–keyup， 注意没有keypress,input事件
4. 长按某一个键时：

• 如果是字符键，会一直触发 keydown-keypress-input，松手后触发keyup事件。
• 如果是非字符键，会在按住的时候一直触发keydown事件，松手后触发keyup事件。
• 如果是回车键，会一直循环触发keydown-keypress-keyup事件

1. 按f5键，不触发所述四个事件

备注

字符键与非字符键

1. 字符键，所有按下后能在输入框有所显示的键
   • 数字0-9
   • 字母a-zA-Z
   • 能显示出来的符号±*/，。、·等等
2. 非字符键：除字符键以外的键，例如F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键等