事件对象详解-优快云博客

本文链接：https://blog.youkuaiyun.com/GYZ_Code/article/details/76797491

事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>


<script type="text/javascript">

/*
    event   事件对象  必须在一个事件调用函数里面使用event对象才有内容

    事件函数  事件调用的函数，一个函数是不是事件函数，不是在定义的时候决定的，而是取决于这个函数调用的时候

    当一个事件发生时，和当前这个事件有关的一些详细信息都会被临时保存到一个指定的地方，这个地方就是事件对象event中，供我们在需要的时候调用，有点类似于飞机的黑匣子

    兼容

    ie、chrome：event是一个内置的全局对象（内置对象不需要实例化）

    ff：事件对象是通过事件函数的第一个参数传入

    如果一个函数是被事件调用的，那么这个函数的第一个参数就是事件对象

    clientX/clientY  事件发生时，鼠标到可视区的距离

*/

    //兼容处理
    function fn(ev){

        var ev=ev || event;

        console.log(ev);

        alert(ev.clientX);
    }

    document.onclick=fn;

</script>

</body>
</html>

事件对象小应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <style type="text/css">

        div{width: 50px;height: 50px;background: #f00;position: absolute;}

    </style>
</head>
<body  style="height:2000px">
<div></div>

<script type="text/javascript">

/*
    clientX/clientY  事件发生时，鼠标到可视区的距离

    onmousemove  当鼠标在一个元素上面移动的时候触发，触发频率是时间间隔，在一个指定的时间内
                 鼠标位置相对于上一个位置发生了移动，就会触发
*/

    var oDiv=document.getElementsByTagName('div')[0];




    document.onmousemove=function (ev){

        var ev=ev || event;
        //滚动条距离窗口顶端的距离
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        oDiv.style.left=ev.clientX+'px';
        oDiv.style.top=ev.clientY+scrollTop+'px';//加上滚动条到窗口的距离，如果有横向滚动条，也要加上
    };

</script>

</body>
</html>