1. 效果

今天逛网站的时候发现了一个特效，就是鼠标移到哪，后面就有个小东西一直跟着，感觉挺好玩的，自己查了一下，顺便复习了一下事件对象的知识，下面试着实现了一下效果

2. 知识点

2.1. 事件对象介绍

定义：事件对象是存储与事件相关的对象
如何产生：当用户触发事件的时候，浏览器会自动捕捉触发时(主要应用是鼠标坐标和键盘按键)的信息,存入对象中。这个对象称之为事件对象。不需要存，一直存在于内存中，由浏览器处理，可以获取，每触发一次都会产生一个全新的事件对象
如何获取事件对象 : 给事件处理函数添加形参 event ev e，随便写都可以，规范的话是上面三个为js内置的形参，为事件对象，实参由浏览器帮我们调用，这里不考虑函数的返回值

 document.querySelector('#box').onclick = function (e) {
       console.log(e)
     }

2.1. 鼠标事件对象

e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离，数字类型，平时使用需要加上px单位，e.pageX+'px'（向下向右为正）click、mousemove

 document.querySelector('#box').onclick = function (e) {
       console.log(e.pageX, e.pageY)
     }

2.2. 键盘事件对象

如何获取用户按键 e.key : 获取字符串 'Enter' e.keyCode : 获取键盘码ASCII码 13（keyCode少用可能会有一定的bug）

键盘上每一个按键对应一个数字，称之为ASCII码

  let input = document.querySelector('input')
     input.onkeydown = function (e) {
       console.log(e.key, e.keyCode)
       if (e.key == 'Enter') {
         console.log('搜索')
       }
       if (e.keyCode == 13) {
         console.log('搜索')
       }
     }

3. 实现一下页面效果

网页鼠标移动 : window.onmousemove（window就是一个浏览器窗口）

注意点：

pageX是数字，设置的时候需要拼接px单位
元素移动前提要有绝对定位（不用父相直接相对于浏览器窗口window移动）

 <style>
     img {
       position: absolute;
       left: 0;
       top: 0;
     }
   </style>
 </head>
 <body>
   <img src="./tianshi.gif" alt="" />
   <script>
     window.onmousemove = function (e) {
       // e是事件对象
       console.log(e)
       document.querySelector('img').style.left = e.pageX + 'px'
       document.querySelector('img').style.top = e.pageY + 'px'
     }
   </script>
 </body>

如何实现鼠标后面炫酷的拖尾效果？