Javascript 笔记与总结（2-16）事件对象

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30546189

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量44

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dee0912/p/4472391.html

本文介绍了如何使用JavaScript处理鼠标事件，包括获取事件对象并利用它来动态改变DOM元素的位置。通过两个实例展示了如何记录鼠标划过图片时的事件对象及如何使图片在被鼠标指针接近时无法被点击。

事件对象：事件发生的瞬间，发生位置、时间、鼠标按键、触发的节点等信息，被打包成一个对象，此对象，系统自动传递给事件函数的第一个参数。

【例】记录鼠标划过图片时的事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="a.bmp" width="300" alt="">        
</body>
<script>
    document.getElementsByTagName("img")[0].onmouseover = function(e){
        console.log(e);
    }
</script>
</html>

此时控制台输出：

其中 target（IE 用的是 srcElement，标准 Event 属性是 target）表示触发事件时所在的 DOM 对象。

另，以下写法是因为在 IE 低版本下，事件对象并不是放在事件函数的第一个参数中，而是放在 window 的 event 属性中：

    document.getElementsByTagName("img")[0].onmouseover = function(e){
        e = window.event || e;
    }

【例】点不中的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            position:relative;
            left:0px;
            top:0px;
        }
    </style>
</head>
<body>
    <img src="a.bmp" width="300" alt="">        
</body>
<script>
    document.getElementsByTagName("img")[0].onmouseover = function(e){
        this.style.left = e.pageX + 10 + "px";
        this.style.top = e.pageY + 10 + "px";
    }
</script>
</html>