前端学习笔记-JS-DOM-常用鼠标/键盘事件_js中addeventlistener的中有onblur这个事件类型吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36434637/article/details/100937734

本文介绍了JavaScript中的常用鼠标事件，如禁止右键菜单、鼠标移动事件及mouseenter与mouseover的区别。同时，讲解了键盘事件，包括keydown、keypress和keyup的执行顺序，以及键盘事件对象的特性。通过实例展示了如何利用这些事件实现特定功能，如搜索框聚焦和快递单号查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

禁止鼠标右键菜单/鼠标选中

<body>
我是一段不愿意被分享的文字
<script>
    // 1. contextmenu 我们可以禁用右键菜单
    document.addEventListener('contextmenu',function (e) {
        e.preventDefault();
    });
    // 2. 禁止选中文字 selectstart
    document.addEventListener('selectstart',function (e) {
         e.preventDefault();
    })
</script>
</body>

鼠标事件对象 MouseEvent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区域的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区域的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

案例:跟随鼠标的图片

案例分析

鼠标不断的移动,使用鼠标移动事件: mousemove
在页面中移动,所以给 document 注册事件
图片要移动距离,而且不占位置,我们使用绝对定位即可
核心原理,每次鼠标移动,我们都会获得最新的鼠标坐标,把这个 X 和 Y 的坐标做为图片的 top 和 left 值就可以移动图片

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/angel.gif">
<script>
    var pic = document.querySelector('img');
    // mousemove只要我们鼠标移动1px 就会触发这个事件
    document.addEventListener('mousemove', function (e) {
        // 获取鼠标的x y坐标
        var x = e.pageX;
        var y = e.pageY;
        // 把获取的x y坐标给图片的 top 和 left 注意加上 px 单位！！！！
        pic.style.left = x + 'px';
        pic.style.top = y + 'px';
    })
</script>
</body>

mouseenter和mouseover的区别

mouseenter类似mouseover，当鼠标移动到元素（经过）就会触发
mouseenter：鼠标经过自身盒子才触发
mouseover：鼠标经过自身和子盒子都会触发
原因：mouseenter不会冒泡
跟mouseenter搭配的鼠标离开mouseleave 同样也不会冒泡

常用键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发（松开的时候触发）
onkeydown	某个键盘按键被按下时触发（按下之后一直触发）
onkeypress	某个键盘按键被按下时触发（按下之后一直触发），但是它不能识别功能键，比如 ctrl、shift 等

注意：

如果使用addEventListener不需要加on
三个事件的执行顺序是：keydown--keypress--keyup （若三个事件同时存在的情况下）

键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的 ASCII 值

注意：

keyup 和 keydown 事件不区分字母大小写， a 和 A 得到 ASCII的都是65
keypress 区分大小写，a 得到的 ASCII是97，A 得到的 ASCII是 65

案例1:

京东按下 s 键定位到搜索框:

<body>
<!--京东按下 s 键定位到搜索框: -->
<!--分析-->
<!--利用键盘事件对象里面的 keyCode 判断用户是否按下的是 s 键-->
<!--搜索框获得焦点的方法: 利用 js 里面的 focus() 方法-->
<input type="text">
<script>
    var inp = document.querySelector('input');
    document.addEventListener('keyup', function (e) {
        if (e.keyCode === 83) {
            inp.focus();
        }
    })
</script>
</body>

案例2:

快递单号查询:查询快递单号的时候，上面一个更大的盒子显示同样的内容（这里的字号更大）。

案例分析

表单检测用户输入：给表单添加键盘事件
同时把快递单号里面的值（value）获取过来赋值给 con 盒子（innerText）作为内容
当失去焦点的时候，就隐藏这个 con 盒子。
当获得焦点的时候，如果快递单号里面不为空，就显示 con 盒子。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }

        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }

        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
<div class="search">
    <div class="con"></div>
    <input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
    // 获取元素
    var con = document.querySelector('.con');
    var inp = document.querySelector('.jd');
    inp.addEventListener('keyup', function (e) {
        // 添加判断条件 只有当input里面有值时 上面的div 才显示 注意 需要键盘输入之后 先判断div 里面的值是不是为空
        if (inp.value === '') {
            con.style.display = 'none';
        } else {
            // 鼠标弹起的是时候 把input的值 给div 并且让div 显示出来
            con.style.display = 'block';
            con.innerHTML = inp.value;
        }
    });
    // 当我们失去焦点 就隐藏div盒子
    inp.addEventListener('blur', function () {
        con.style.display = 'none';
    });
    //  当我们获得焦点并且div有值 就显示div盒子
    inp.addEventListener('focus', function () {
        if (inp.value !== '') {
            con.style.display = 'block';
        }
    })

</script>
</body>

注意：

keydown 和 keypress 触发的时候，文字还没有落入文本框中。

keyup 触发的时候，文字已经输入到文本框中。