IT俱乐部 JavaScript JavaScript中常见的事件用法小结

JavaScript中常见的事件用法小结

一.onclick()  鼠标左键单击事件

案例:点击按钮弹框


    document.getElementById("btn").onclick = function () {
        alert("点击了");
    };

 

二.onmouseover  鼠标进入事件与onmouseout鼠标离开事件

案例:鼠标进入红色,离开蓝色(放上去就可以,不用点击)

    Title
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    
document.getElementById("dv").onmouseover = function () { document.getElementById("dv").style.backgroundColor = "red"; }; document.getElementById("dv").onmouseout = function () { document.getElementById("dv").style.backgroundColor = ""; };

三.onfocus  获取焦点事件与onblur  失去焦点事件

案例:文本框


    document.getElementById("te").onfocus = function () {
        document.getElementById("te").value = "";
    };
    document.getElementById("te").onblur = function () {
        document.getElementById("te").value = "请输入内容";
    };

四.onmousemove  鼠标移动事件

鼠标移动的时候就会触发

案例:div 跟着鼠标移动

    Title
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
            position: absolute;
        }
    
document.onmousemove = function (e) { //鼠标相对于页面的可视区域的横坐标 var x = e.clientX; //鼠标相对于页面的可视区域的纵坐标 var y = e.clientY; //div对象 var dvobj = document.getElementById("dv"); //设置div的横坐标 dvobj.style.left = x + "px"; //设置div的纵坐标 dvobj.style.top = y + "px"; };

五.onscroll  滚动条滚动事件

当拖动滚动条的时候就会触发

    Title
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            overflow: auto;
        }
    
码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙
document.getElementById("dv").onscroll = function () { console.log("滚动条被拖动了"); };

 

六. onkeydown / onkeyup  键盘按下/抬起事件

当键盘按下或者抬起任意按键的时候触发


    document.getElementById("txt").onkeydown = function () {
        console.log("键盘按下了");
    };
    document.getElementById("txt").onkeyup = function () {
        console.log("键盘抬起了");
    };

七.keyCode  获取按下的是哪个按键 

    //页面的任何的位置.按下键盘,获取按键的值
    document.onkeydown = function (e) {
        //console.log(e.keyCode);//事件参数对象
        switch (e.keyCode) {
            case 81:
                console.log("您按下的是Q");
                break;
            case 87:
                console.log("您按下的是W");
                break;
            case 69:
                console.log("您按下的是E");
                break;
            case 82:
                console.log("您按下的是R");
                break;
        }
    };

八. onmousedown / onmouseup  鼠标按下/抬起事件

当鼠标左键右键按下或者抬起的时候触发

按下或抬起滚动轮也会触发,滑动滚动轮不能触发

如果鼠标比较高级,有其他按键的情况下,按下或抬起也会触发

    Title
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    
document.getElementById("dv").onmousedown = function () { console.log("鼠标按下了"); }; document.getElementById("dv").onmouseup = function () { console.log("鼠标抬起了"); };

本篇博客来自于传智播客视频教程的总结以及笔记的整理,仅供学习交流,切勿用于商业用途

到此这篇关于JavaScript中常见的事件用法小结的文章就介绍到这了,更多相关js事件内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/8219.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部