事件对象（Event对象）

最新推荐文章于 2024-09-17 11:42:54 发布

周白卿

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量155

点赞数

分类专栏： JavaScript学习笔记文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_51088023/article/details/125894278

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个键被按下、鼠标滚轮滚动的方向等等。只有当事件发生时，Event对象才有效，只能在事件处理程序中访问Event对象。

Event对象的主要属性
属性	说明
type	返回事件名称。如单击事件名click
srcElement	返回产生事件的元素对象。如当单击按钮产生click事件时，该事件的setElement属性就是对于这个按钮对象的引用
cancelBubble	表示是否取消当前事件向上冒泡、传递给上一层的元素对象。默认值为false，允许冒泡；否则为false，禁止该事件冒泡
return Value	指定事件的返回值，默认为true。若设置为false，则取消该事件的默认处理动作
keyCode	指示键盘事件的按键的Unicode键码值
altKey	指示Alt键的状态，当Alt键按下时为true
ctrlKey	指示Ctrl键的状态，当Ctrl键按下时为true
shiftKey	指示Shift键的状态，当Shift键按下时为true
repeat	指示Keydown事件是否在重复，并且只适用于Keydown事件
button	指示哪一个鼠标按键被按下（IE8以前的版本，1：左键被按下。2：右键被按下。4：中键被按下。IE8以后的版本，0：左键被按下。2：右键被按下。1：中键被按下）
x,y	指示鼠标相对于页面的X，Y坐标，即水平和垂直位置，单位为像素
clientX,clientY	指示鼠标指针相对于窗口浏览区的X，Y坐标
screenX,screenY	指示鼠标指针相对于电脑屏幕的X，Y坐标
offsetX,offsetY	指示鼠标指针相对于触发事件的元素的X，Y坐标
fromElement	用于mouseover和mouseout事件，指示鼠标指针从哪个元素移来
toElement	用于mouseover和mouseout事件，指示鼠标指针移向那个元素

鼠标坐标练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0%;
            padding: 0%;
        }
        #areaDiv{
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }
        #showMsg{
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }
    </style>
    <script>
        window.onload = function(){
            /*-----------当鼠标在areaDiv中移动时，showMsg显示鼠标坐标---------------*/
            //获取areaDiv和showMsg
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");
            //为areaDiv绑定onmousemove响应函数
            //onmousemove事件会在鼠标在元素中移动时触发
            areaDiv.onmousemove = function(event){
                //传入事件对象
                //获取鼠标的x,y坐标
                /*在IE8中，响应函数被触发时，浏览器不会传递事件函数*/
                //在IE8以下的浏览器中是将事件对象作为window对象的属性保存的 
                //因此需要进行判断以兼容所有浏览器
                if(!event){event = window.event}  
                var x = event.clientX;
                var y = event.clientY;
                //在showMsg中显示鼠标的坐标
                showMsg.innerHTML = ("x="+x+";"+"y="+y);  
            };

        };
    </script>
</head>

<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>

</html>