开发者社区开发与运维文章正文

【JavaScript】事件对象

2022-07-10 93

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如:鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向…

案例：当鼠标移动时返回鼠标当前坐标

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 2px solid green;
            margin-top: 10px;
        }
        #box1{
            height: 100px;
            width: 500px;
        }
        #box2{
            height: 20px;
            width: 500px;
        }
    </style>
    <script>
        window.onload = function(){
            //分别找到两个盒子
            var box1 = document.getElementById('box1');
            var box2 = document.getElementById('box2');
            //给box1绑定鼠标移动事件
            box1.onmousemove = function(event){
                //返回鼠标x轴
                var x = event.clientX;
                //返回鼠标y轴
                var y = event.clientY;
                //将x，y写入到box2中
                box2.innerHTML = "x="+ x +" y="+ y;
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>