史上最详细的DOM事件之键盘事件

上篇博客讲了DOM的鼠标事件，这篇博客我们来讲一讲DOM的键盘事件。

HTML代码：

    <input type="text" name="" id="text">
    <input type="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/