DOM事件高级④(常用的鼠标、键盘事件)

十八岁讨厌编程

已于 2022-07-17 23:46:29 修改

阅读量642

点赞数 1

分类专栏： # DOM编程 web前端开发文章标签： css3 前端 html5

于 2022-03-28 20:23:21 首次发布

本文链接：https://blog.csdn.net/zyb18507175502/article/details/123803685

版权

web前端开发同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

DOM编程

8 篇文章 0 订阅

订阅专栏

文章目录

常见的鼠标事件
常用的键盘事件
- 键盘事件
- 键盘事件对象
附：ASCII码表

常见的鼠标事件

鼠标事件

在这里插入图片描述
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})

2.禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function(e) {
    e.preventDefault();
 })

mouseenter 和mouseover的区别

mouseenter 鼠标事件

当鼠标移动到元素上时就会触发 mouseenter 事件类似 mouseover，它们两者之间的差别是mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡。

实验代码

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseenter', function() {
            console.log(11);

        })
    </script>
</body>

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。
在这里插入图片描述
案例：让一个物体随着鼠标的移动而移动
思路：
① 鼠标不断的移动，使用鼠标移动事件： mousemove
② 在页面中移动，给document注册事件
③ 图片要移动距离，而且不占位置，我们使用绝对定位即可
④ 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left 值就可以移动图片

<body>
    <div>跟随</div>
    <script>
        let gensui = document.getElementsByTagName('div')[0];
        document.onmousemove = function(e){
            
            gensui.style.left = e.clientX + 'px';
            gensui.style.top = e.clientY + 'px';
        };
    </script>
</body>