详细解析DOM事件的event事件对象（一）

迷南。 2023-02-14 13:13 7阅读 0赞

## 详细解析DOM事件的event事件对象（一） ##

近期我们一直在学习DOM，马上到了尾期了，今天来说一下DOM事件的event事件对象。这里我们先解析一下键盘和鼠标事件的event对象属性。

**HTML代码：**

**1.键盘事件的event对象**

// 键盘事件的 事件对象属性
        
        // altKey 返回当事件被触发时，"ALT" 是否被按下。 2
        document.onkeydown=function(ev){ 
            ev=ev||window.event;// 兼容IE 
            console.log(ev.altKey);
        }
        // ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。 2
        // shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。 2
        // metaKey 返回当事件被触发时，"meta" 键是否被按下。 2
    
        // keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 2
        document.onkeydown=function(ev){ 
            ev=ev||window.event;
            console.log(ev.keyCode);
        }
        document.onkeydown=function(ev){ 
            ev=ev||window.event;
            // console.log(ev.keyCode);
            if(ev.keyCode==16){ 
                document.onkeypress=function(ev2){ 
                    ev2=ev2||window.event;
                    console.log(ev2.keyCode);
                }
            }
        }
    
        // charCode 返回onkeypress事件触发键值的字母代码。 unicode码
        document.onkeypress=function(ev){ 
            ev=ev||window.event;
            console.log(ev.charCode);
        }
        // key 在按下按键时返回按键的标识符。 3
        document.onkeydown=function(ev){ 
            ev=ev||window.event;
            console.log(ev.key);
        }
    
        // Location 返回按键在设备上的位置 3
        document.onkeydown=function(ev){ 
            var ev=ev||window.event;
            console.log(ev.location);
        }
    
        // which 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 2
        document.onkeydown=function(ev){ 
            var ev=ev||window.event;
            console.log(ev.which);
        }
    
        // document.getElementsByTagName("button")[0].οnclick=function(){ 
        // window.open("01三级联动.html")
        // }
        document.onkeydown=function(ev){ 
            var ev=ev||window.event;
            if(ev.keyCode==13){ 
                window.open("01三级联动.html");
            }
        }

**2.鼠标事件的event对象**

// button 返回当事件被触发时，哪个鼠标按钮被点击。 2
        document.onmousedown=function(ev){ 
            var ev=ev||window.event;
            console.log(ev.button);// 0左键 1中键 2右键
        }
    
        // clientX 返回当事件被触发时，鼠标指针的水平坐标。 相对于可视区域
        // clientY 返回当事件被触发时，鼠标指针的垂直坐标。 2
        document.onmousemove=function(ev){ 
            var ev=ev||window.event;
            // console.log(ev.clientX,ev.clientY);
        }
    
        // screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 相对于屏幕
        // screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 2
        document.onmousemove=function(ev){ 
            var ev=ev||window.event;
            // console.log(ev.screenX,ev.screenY);
        }
    
        document.onmousemove=function(ev){ 
            var ev=ev||window.event;
            console.log(ev.offsetX,ev.offsetY);
        }
    
        document.onmousemove=function(ev){ 
            var ev=ev||window.event;
            console.log(ev.pageX,ev.pageY);
        }
    
        document.onmousemove=function(ev){ 
            var ev=ev||window.event;
            console.log(ev.x,ev.y);
        }
    
    
        // relatedTarget 返回与事件的目标节点相关的节点。 2
        document.getElementById("text").onkeydown=function(ev){ 
            var ev=ev||window.event;
            console.log(ev.relatedTarget);
        }

**注意：** event对象一定要注意浏览器的兼容问题。

**视频讲解链接：  
https://www.bilibili.com/video/BV1Vk4y1z7Jm/**