DOM之事件函数

事件处理函数

<!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("我是事件处理函数我执行了me");
      console.log(event);

      var e=event||window.event;
      
  }
</script>
  • 1.当事件处理函数执行的时候，系统会自动注入实参，我们用形参接受【事件对象】
  • 2.在不同浏览器中事件对象是有兼容问题的。使用短路语法进行兼容。

获取鼠标位置

概述：当用户触发事件的时候，系统会自动给事件处理函数注入实参【事件函数处理】

screenX||screenY

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

<script type="text/javascript">
  //获取节点
  var inner = document.querySelector(".inner");
  //鼠标在整个网页中移动
  document.onmouseover=function (event){
      console.log("123");
      var e=event||window.event;

      inner.innerHTML="screentX:"+e.screenX+"screenY:"+e.screenY;
  }
</script>

pageX||pageY

概述：他们两者也是事件对象属性，主要作用也是获取鼠标位置，是网页主题部分左上角为零零点。

<script type="text/javascript">
  //获取节点
  var inner = document.querySelector(".inner");
  //鼠标在整个网页中移动
  document.onmouseover=function (event){
      console.log("123");
      var e=event||window.event;

      inner.innerHTML="screentX:"+e.screenX+"screenY:"+e.screenY+"<br/>";
      inner.innerHTML+="pageX:"+e.pageX+"pageY:"+e.pageY;
  }
</script>

clientX||clientY

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

<script type="text/javascript">
  //获取节点
  var inner = document.querySelector(".inner");
  //鼠标在整个网页中移动
  document.onmouseover=function (event){
      console.log("123");
      var e=event||window.event;

      inner.innerHTML="screentX:"+e.screenX+"screenY:"+e.screenY+"<br/>";
      inner.innerHTML+="pageX:"+e.pageX+"pageY:"+e.pageY+"<br/>";
      inner.innerHTML+="clientX:"+e.clientX+"clientY:"+e.clientY;
  }
</script>

offsetX||offsetY

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

<script type="text/javascript">
  //获取节点
  var inner = document.querySelector(".inner");
  //鼠标在整个网页中移动
  document.onmouseover=function (event){
      console.log("123");
      var e=event||window.event;

      inner.innerHTML="screentX:"+e.screenX+"screenY:"+e.screenY+"<br/>";
      inner.innerHTML+="pageX:"+e.pageX+"pageY:"+e.pageY+"<br/>";
      inner.innerHTML+="clientX:"+e.clientX+"clientY:"+e.clientY+"<br/>";
      inner.innerHTML+="offsetX:"+e.offsetX+"offsetY:"+e.offsetY;
  }
</script>
posted @ 2023-03-10 23:07  King-DA  阅读(17)  评论(0)    收藏  举报