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

缺乏、安全感 2023-02-14 01:16 8阅读 0赞

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

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

**HTML代码：**

#### 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/**