js基础event事件对象你真的了解吗？

今天和大家说说js的event事件，看看你了解多少？


HTML代码：

    <form>
        <input type="text" id="text">
        <!-- <input type="submit"> -->
        <button>登录</button>
    </form>

键盘事件的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");
        }
    }

鼠标事件的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浏览器的兼容性哦！