[JavaScript小案例] 跟随鼠标移动的天使

最新推荐文章于 2024-08-05 11:08:01 发布

YinJie…

最新推荐文章于 2024-08-05 11:08:01 发布

阅读量1k

点赞数 3

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_49900295/article/details/123403123

版权

javascript 专栏收录该内容

39 篇文章 8 订阅

订阅专栏

文章目录

什么是事件对象？
鼠标事件对象
跟随鼠标移动的天使案例：

什么是事件对象？

假如我们有一个div盒子，我们要给他绑定一个点击事件应该怎么做？

<script>
    var div = document.querySelector( 'div ' );
    div.onclick = function() {}
</script>

以前我们function里是不写东西的，现在我们在括号里面添加一个事件对象event:

div.onclick = function(event) {}

1. event 就是一个事件对象写到我们侦听函数的小括号里面当形参来看
2．事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3．事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，比如鼠标坐标，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了哪个键I
4．这个事件对象我们可以自己命名比如event 、evt、e
5．事件对象也有兼容性问题ie6 7 8 通过window.event

简单总结一下：

eventTarget.onclick = function (event) { }

这个event就是事件对象，我们还喜欢的写成e 或者evt

官方解释:event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解∶事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。

下面是我们需要掌握的鼠标事件对象：
在这里插入图片描述

跟随鼠标移动的天使案例：

案例分析：

1.鼠标不断的移动，使用鼠标移动事件:mousemove
2.在页面中移动，给document注册事件
3.图片要移动距离，而且不占位置，我们使用绝对定位即可
4.核心原理∶每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片

实现效果：

请添加图片描述

代码示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.onmousemove = function(e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        };
    </script>
</body>
</html>

YinJie…

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
[JavaScript小案例] 跟随鼠标移动的天使

文章目录什么是事件对象？鼠标事件对象跟随鼠标移动的天使案例：案例分析：实现效果：代码示例：什么是事件对象？假如我们有一个div盒子，我们要给他绑定一个点击事件应该怎么做？<script> var div = document.querySelector( 'div ' ); div.onclick = function() {}</script>以前我们function里是不写东西的，现在我们在括号里面添加一个事件对象event:div.onclick
复制链接

扫一扫