DOM之事件event

事件对象（event）

概述：任意节点树上的节点（标签），都可以绑定一个或者多个事件。当用户触发事件的时候，系统会自动给事件处理函数传递实参，而这个参数就是事件对象（事件对象给我们传递了很多信息）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    div{
      width: 400px;
      height: 200px;
      background: skyblue;
      margin: 100px auto;
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>
<script type="text/javascript">
  var div = document.querySelector("div");
  div.onclick=function (event){
    console.log(event)
    // 针对于高级浏览器：谷歌、IE8以上的浏览器---》event
    // 针对于低级浏览器：IE8以下的，事件对象作为BOM对象属性
    var event=event||window.event;
    
  }
</script>

当事件处理函数执行的时候，系统会自动注入实参，我们用形参接收【事件对象】
在不同浏览器中事件对象是有着兼容问题，使用短路语句进行兼容。

1.1获取鼠标位置

概述：当用户触发事件的时候，系统会自动给事件处理函数注入实参【事件处理函数】，他给我们提供很多信息，可以获取鼠标位置

1.1.1screenX和screenY

概述：他们两者是事件对象属性，主要可以获取鼠标位置，获取鼠标位置零零点在电脑屏幕左上角。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 10000px;
    }
    .outer{
      position: fixed;
      width: 600px;
      height: 300px;
      background: skyblue;
      left: 30%;
      top: 30px;
    }
    .inner{
      width: 300px;
      height: 150px;
      background: red;
      margin: 20px auto;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner">

  </div>
</div>

</body>
</html>
<script type="text/javascript">
  var inn=document.querySelector(".inner");
  document.onmousemove=function (event){
    console.log(123)
    var event=event||window.event;
    console.log(event.screenX)
    console.log(event.screenY)
    inn.innerHTML=event.screenX+","+event.screenY;

  }
</script>

1.1.2 pageX和pageY

概述：网页主体的零零点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 10000px;
    }
    .outer{
      position: fixed;
      width: 600px;
      height: 300px;
      background: skyblue;
      left: 30%;
      top: 30px;
    }
    .inner{
      width: 300px;
      height: 150px;
      background: red;
      margin: 20px auto;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner">

  </div>
</div>

</body>
</html>
<script type="text/javascript">
  var inn=document.querySelector(".inner");
  document.onmousemove=function (event){
    console.log(123)
    var event=event||window.event;
    console.log(event.screenX)
    console.log(event.screenY)
    // inn.innerHTML=event.screenX+","+event.screenY;
    inn.innerHTML=event.pageX+","+event.pageY;

  }
</script>

1.1.3clientX和clientY

概述：他们两者也是事件对象属性，主要作用是获取鼠标位置。但是他的零零点是按照可视区域的左上角。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 10000px;
    }
    .outer{
      position: fixed;
      width: 600px;
      height: 300px;
      background: skyblue;
      left: 30%;
      top: 30px;
    }
    .inner{
      width: 300px;
      height: 150px;
      background: red;
      margin: 20px auto;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner">

  </div>
</div>

</body>
</html>
<script type="text/javascript">
  var inn=document.querySelector(".inner");
  document.onmousemove=function (event){
    console.log(123)
    var event=event||window.event;
    console.log(event.screenX)
    console.log(event.screenY)
    // inn.innerHTML=event.screenX+","+event.screenY;
    // inn.innerHTML=event.pageX+","+event.pageY;
    inn.innerHTML=event.clientX+","+event.clientY;
    inn.innerHTML+=event.offsetX+","+event.offsetY;
  }
</script>

1.1.4 offsetX和offsetY

概述：他们两者也是事件对象属性，他们两者主要的作用也是获取鼠标位置。获取数据类似pageX和pageY。但是这个获取数据的零零点会随着元素的子元素受到影响

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 10000px;
    }
    .outer{
      position: fixed;
      width: 600px;
      height: 300px;
      background: skyblue;
      left: 30%;
      top: 30px;
    }
    .inner{
      width: 300px;
      height: 150px;
      background: red;
      margin: 20px auto;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner">

  </div>
</div>

</body>
</html>
<script type="text/javascript">
  var inn=document.querySelector(".inner");
  document.onmousemove=function (event){
    console.log(123)
    var event=event||window.event;
    console.log(event.screenX)
    console.log(event.screenY)
    // inn.innerHTML=event.screenX+","+event.screenY;
    // inn.innerHTML=event.pageX+","+event.pageY;
    inn.innerHTML=event.clientX+","+event.clientY;
    inn.innerHTML+=event.offsetX+","+event.offsetY;
  }
</script>

原生JS实现拖拽的效果

posted @ 2024-05-13 20:37 King-DA 阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

King-D

king-d