什么是事件对象？

事件对象详解

最新推荐文章于 2025-06-14 21:17:42 发布

原创最新推荐文章于 2025-06-14 21:17:42 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个简单的HTML页面示例，详细介绍了如何使用JavaScript监听并处理不同类型的事件，包括鼠标点击、鼠标悬停及键盘按键事件。重点讲解了事件对象的属性，如type、clientX/Y、pageX/Y、screenX/Y、offsetX/Y以及target等。

事件对象

<!DOCTYPE html>
<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>
        #inp {
            margin-top: 200px;
        }

        #box {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin-left: 600px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <input type="text" id="inp">

    <div id="box"></div>
</body>

</html>
<script>
    let divOne = document.getElementById('box')
    let inp = document.getElementById('inp')
    // 事件对象 给元素的某一个行为绑定方法（不管是DOM0，DOM2）,当事件触发的时候，都会把对象的绑定方法执行
    // 不仅仅执行了，而且还给对应的方法传递了一个参数值
    function fn(event) {
        //PointerEvent 点击事件对象
        //MouseEvent 鼠标事件对象
        //KeyboardEvent 键盘事件对象
        console.log('fn--->', event);
        //event.type:'click',当前事件类型
        //event.clientX/clientY:鼠标触发点距离"当前窗口"
        // （不管处于哪一层，都是获取的距离当前屏幕左上角）左上角的x/y轴的坐标
        // enent.pageX/pageY:鼠标触发距离'BODY'左上角的xy轴的坐标（IE678不兼容）
        //event.screenX/screenY：鼠标触发点距离整个屏幕左上角的xy轴坐标
        //event.offsetX/offsetY：鼠标触发点距离当前触发元素左上角的xy轴坐标
        //event.target 获取当前操作的事件源（鼠标是在哪个元素上操作的，那么事件源就是谁
    }
    divOne.onclick = fn;
    divOne.onmouseenter = fn;
    inp.onkeydown = fn;

</script>