事件对象event案例-鼠标跟随移动

最新推荐文章于 2024-07-30 10:56:44 发布

山里没有wifi

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量376

点赞数 6

分类专栏： DOM 文章标签：计算机外设 javascript 前端

本文链接：https://blog.csdn.net/Prague_Cze/article/details/135642086

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基础概念

只有在注册的事件函数中，才可以获取事件对象event

高级浏览器使用事件函数的形参获取，低版本浏览器使用window.event对象获取

// 处理兼容方式获取event对象
btn.onclick = function(e){
  e = e || window.event
}

事件的event对象是系统封装的，这个对象当中封装了和这个事件相关的一切信息，在不同的事件中，需要获取的内容不一样

鼠标的位置

客户端可视区 Client
页面文档区 Page
目标阶段的元素区 Offset

 // 1.5 鼠标的位置也是存在于事件对象当中
window.onclick = function(e){
  // 鼠标在视口区域的坐标，以视口左上角为原点,跟页面高度没有关系
  console.log(e.clientX, e.clientY);
  // 鼠标在页面中的坐标,以页面左上角为原点
  console.log(e.pageX, e.pageY);
  // 鼠标在目标阶段的元素中(块元素)的坐标,以自身元素左上角为原点
  console.log(e.offsetX, e.offsetY);
}

案例-鼠标跟随移动

将来让盒子移动位置的方式，无非就是实时获取这些坐标，然后给盒子赋值移动即可；

<body>
  <div>
    <img src='./imgs/01.png' alt='' style="left: 0; top: 0; position: absolute">
  </div>
  <script>
  var pic = document.querySelector('img');
    document.onmousemove = function(e){
      e = e || window.event;
      pic.style.left = e.clientX + 'px';
      pic.style.top = e.clientY + 'px';
    }
  </script>
</body>

山里没有wifi

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
事件对象event案例-鼠标跟随移动

事件的event对象是系统封装的，这个对象当中封装了和这个事件相关的一切信息，在不同的事件中，需要获取的内容不一样。高级浏览器使用事件函数的形参获取，低版本浏览器使用window.event对象获取。将来让盒子移动位置的方式，无非就是实时获取这些坐标，然后给盒子赋值移动即可；只有在注册的事件函数中，才可以获取事件对象event。
复制链接

扫一扫