• 事件对象（Event对象）

    当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个键被按下、鼠标滚轮滚动的方向等等。只有当事件发生时，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事件，指示鼠标指针移向那个元素

    鼠标坐标练习 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Documenttitle>
    7.     <style>
    8.         * {
    9.             margin: 0%;
    10.             padding: 0%;
    11.         }
    12.         #areaDiv{
    13.             border: 1px solid black;
    14.             width: 300px;
    15.             height: 50px;
    16.             margin-bottom: 10px;
    17.         }
    18.         #showMsg{
    19.             border: 1px solid black;
    20.             width: 300px;
    21.             height: 20px;
    22.         }
    23.     style>
    24.     <script>
    25.         window.onload = function(){
    26.             /*-----------当鼠标在areaDiv中移动时，showMsg显示鼠标坐标---------------*/
    27.             //获取areaDiv和showMsg
    28.             var areaDiv = document.getElementById("areaDiv");
    29.             var showMsg = document.getElementById("showMsg");
    30.             //为areaDiv绑定onmousemove响应函数
    31.             //onmousemove事件会在鼠标在元素中移动时触发
    32.             areaDiv.onmousemove = function(event){
    33.                 //传入事件对象
    34.                 //获取鼠标的x,y坐标
    35.                 /*在IE8中，响应函数被触发时，浏览器不会传递事件函数*/
    36.                 //在IE8以下的浏览器中是将事件对象作为window对象的属性保存的 
    37.                 //因此需要进行判断以兼容所有浏览器
    38.                 if(!event){event = window.event}  
    39.                 var x = event.clientX;
    40.                 var y = event.clientY;
    41.                 //在showMsg中显示鼠标的坐标
    42.                 showMsg.innerHTML = ("x="+x+";"+"y="+y);  
    43.             };
    44.  
    45.         };
    46.     script>
    47. head>
    48.  
    49. <body>
    50.     <div id="areaDiv">div>
    51.     <div id="showMsg">div>
    52. body>
    53.  
    54. html>

  • 相关阅读:
    Matter开发，看这一篇就够了
    Dify源码本地部署启动
    VirtIO
    一.STM32的开发环境,keil5/MDK5.14安装教程（附下载链接）
    web前端期末大作业 HTML+CSS+JavaScript仿安踏
    Gartner权威报告解读：探究应用可观测性的发展
    Nvidia Jetson Nano学习笔记--使用C语言实现GPIO控制
    day03_if_循环
    Python---练习：判断是否为一个合法三角形（if else）
    Spring
  • 原文地址：https://blog.csdn.net/qq_51088023/article/details/125894278