史上最详细的DOM事件之键盘事件
上篇博客讲了DOM的鼠标事件，这篇博客我们来讲一讲DOM的键盘事件。
HTML代码：
<inputtype="text"name=""id="text"><inputtype="text"name=""id="text2">
1.onkeydown事件
var oText=document.getElementById("text"); var oText2=document.getElementById("text2"); // onkeydown 某个键盘按键被按下。 针对所有键 oText.onkeydown=function(event){ console.log("onkeydown事件"); console.log(event); } document.onkeydown=function(event){ console.log(event.keyCode); }
2.onkeyupd事件
// onkeyup 某个键盘按键被松开。 oText.onkeyup=function(event){ console.log("onkeyup事件"); console.log(event); } document.onkeyup=function(event){ console.log(event.keyCode); }
3.onkeypress事件
// onkeypress 某个键盘按键被按下并松开。 不识别功能键(上下左右，alt ctrl shift) 区分大小写 oText2.onkeypress=function(event){ console.log("onkeypress事件"); // console.log(event); } document.onkeydown=function(ev){ if(ev.keyCode==16){ document.onkeypress=function(ev2){ console.log(ev2.keyCode) } } }
**注意：**学会区分onkeydown事件和onkeypress事件，主要区别在于onkeydown事件针对于所欲的键有效，而onkeypress针对功能键(上下左右，alt,ctrl,shift等)无效。同时onkeypress事件可以区分大小写字母。
视频讲解链接：
https://www.bilibili.com/video/BV1bt4y1C7pj/
