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

关于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事件

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

备注

字符键与非字符键

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