JavaScript（四）DOM事件：鼠标和键盘事件

最新推荐文章于 2024-03-10 10:44:18 发布

觅远

最新推荐文章于 2024-03-10 10:44:18 发布

阅读量531

点赞数

分类专栏： web前端文章标签： javascript html js css

本文链接：https://blog.csdn.net/JBY2020/article/details/110148757

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

HTML DOM 通过JS中的元素分配事件，Document是基于window对象的整个文档带对象。事件对象，当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传入到响应(回调)函数中，所以在函数中要调用事件对象就要在定义函数的时候定义一个形参，在函数中调用事件对象就可以直接使用这个传入的形式参数。详细：https://www.runoob.com/jsref/dom-obj-document.html

元素对象属性和方法：https://www.runoob.com/jsref/dom-obj-all.html

属性对象：https://www.runoob.com/jsref/dom-obj-attributes.html

Console 对象：https://www.runoob.com/jsref/obj-console.html

CSSStyleDeclaration 对象的属性和方法：https://www.runoob.com/jsref/obj-cssstyledeclaration.html

HTMLCollection 对象中的属性和方法：https://www.runoob.com/jsref/dom-htmlcollection.html

事件对象：https://www.runoob.com/jsref/dom-obj-event.html

常用事件对象

鼠标事件

鼠标移动事件：onmousemove，在鼠标移动时就会触发事件。

鼠标移入（onmouseover）、移出（onmouseout）事件：当鼠标移动到触发事件的元素上，事件被触发；移出后，触发移出事件。
鼠标点击事件：完整的鼠标点击事件由onmousedown, onmouseup 以及 onclick 构成：首先鼠标按钮被点击时，onmousedown 事件被触发；然后鼠标按钮被释放时，onmouseup 事件被触发；最后鼠标点击完成后，onclick 事件被触发。

案例：鼠标拖拽

操作流程：

当鼠标在被拖拽元素上按下时，开始拖拽 :鼠标按下事件

当官鼠标移动的时候元素跟随鼠标一起移动：鼠标移动事件

当鼠标松开的时候，被拖拽的元素固定到当前的位置：鼠标松开事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #box{
            width: 200px;height: 200px;border: 2px solid sienna;
            background-image: url("../img/img1/413578.jpg");position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        // 获取元素，要使元素能够被拖拽就要让其脱离文档流，CSS需要设置样式属性position: absolute;
        var box = document.getElementById("box");
        // 给元素绑定事件鼠标按下事件
        box.onmousedown = function (event) {

            // 当鼠标点击事件发生之后，要开始移动时，鼠标会自动跳到元素的左上位置，所以需要在移动事件发生时
            // 元素移动位置减去这个偏移量：鼠标位置减去元素的相对于文档的边界值为偏移量
            var left = event.pageX - box.offsetLeft,
                top = event.pageY - box.offsetTop;

            // 元素的移动事件，当鼠标不在元素上移动时，元素不会被移动，所以需要选择当前文档区域作为移动事件的元素
            document.onmousemove = function (event) {
                // 元素位置跟随鼠标位置移动，所以需要得到鼠标的的坐标位置信息，这里使用的pageX和pageY获取坐标，而不用元素的
                // clientX和clientY属性，因为后者只能在可视化区域里操作，如果添加了滚动条就不能操作
                var x = event.pageX - left,   // 偏移量
                    y = event.pageY - top;    // 偏移量
                // 通过修改元素的style属性来改变元素的位置
                box.style.left = x+"px";
                box.style.top = y+"px";
            }

            // 当鼠标松开时，将元素固定到当前位置,同样将整个文档作为元素对象操作，因为只是将移动的元素作为对象的时候，
            // 它是脱离文档流的，在移动到和其他元素重叠时，鼠标就不会作用在当前元素上，事件对象就会失效
            document.onmouseup = function () {
                // 通过取消事件来结束移动事件，让元素固定下来，给事件重新赋值为null即可
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    </script>
</body>
</html>

鼠标滚轮事件

火狐浏览器中使用：box.addEventListener("DOMMouseScrool",function () {},false)

案例：滚动鼠标使元素变大变小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚轮</title>
    <style>
        #box{
            width: 200px;height: 150px;border: 2px solid sienna;
            background-image: url("../img/img1/413578.jpg");position: absolute;
        }
    </style>
</head>
<body style="height: 3000px;">
    <div id="box"></div>
    <script>
        var box = document.getElementById("box");

        box.onmousewheel = function (event) {
            // JS中通过判断鼠标滚轮事件发生后的wheelDelta属性值来处理事件，滚轮向上为正值，向下为负值

            if(event.wheelDelta > 0){
                box.style.width = box.clientWidth + 10 +"px";
                box.style.height = box.clientHeight + 10 + "px";
            }else {
                box.style.width = box.clientWidth - 10 + "px";
                box.style.height = box.clientHeight - 10 + "px";
            }
            return false;   // 因为浏览器自带滚轮属性，所以需要清除浏览器自带的滚轮事件，这样在浏览器和元素的各自执行自己的滚轮事件时不会相互影响
        }

        // box.addEventListener("DOMMouseScrool",function () {},false)，火狐浏览器中的鼠标滚轮事件
    </script>
</body>
</html>

键盘事件

某个键盘按键被按下：onkeydown
某个键盘按键被按下并松开：onkeypress
某个键盘按键被松开：onkeyup

键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document对象。键盘事件可以通过判断事件对象的keyCode属性值来判断事件是否发生，keyCode属性值为字符编码，主键盘数字和字母（大小写字母都默认为大写ASCII码）遵循主键盘ASCII码。通过不同的属性值来执行不同的代码，需要注意的是组合键的使用，因为组合键使用不能让同一个事件对象同时等于一个属性值，所以对于特殊的组合键有专有的属性与之对应。如alt、ctrl、shift键对应的属性（属性值为布尔型）为altKey、ctrlKey、shiftKey，如果这些按键的事件发生，他们的属性值为true。组合键事件是否发生就需要满足事件发生时的条件都为true。

案例：组合键使用修改元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span id="di" style="font-size: 50px; color: deepskyblue"></span>
    <script>
        var sp = document.getElementById("di");
        document.onkeydown = function (event) {
            if(event.keyCode==67 && event.ctrlKey == true){
                sp.innerText = "复制事件";
                sp.style.color = "red";
            }else if (event.keyCode==86 && event.ctrlKey == true){
                sp.innerText = "黏贴事件";
                sp.style.color = "yellow";
            }else {
                sp.innerText = "未定义事件";
                sp.style.color = "deepskyblue";
            }
        }
    </script>
</body>
</html>

觅远

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（四）DOM事件：鼠标和键盘事件

HTML DOM 通过JS中的元素分配事件，Document是基于window对象的整个文档带对象。事件对象，当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传入到响应(回调)函数中，所以在函数中要调用事件对象就要在定义函数的时候定义一个形参，在函数中调用事件对象就可以直接使用这个传入的形式参数。详细：https://www.runoob.com/jsref/dom-obj-document.html元素对象属性和方法：https://www.runoob.com/jsref/dom-ob
复制链接

扫一扫

专栏目录