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

来源:程序思维浏览:1072次
今天和大家说说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浏览器的兼容性哦!
精品好课
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
收藏
扫一扫关注我们