事件对象

首先写一个div方便观察

    #box1 {

      width: 400px;

      height: 800px;

      background-color: aqua;

    }

    <div id="box1"></div>

      pageY pageX获取点击位置的X Y坐标 包括滚动条折叠的 相对于body标签

     offsetY offsetX相对于元素自己的坐标 相对于父元素
 

     var box1 = document.querySelector("#box1");

      box1.addEventListener("click", (e) => {

        console.log(e.pageY, e.offsetY, e.pageX, e.offsetX);

      });

      mousemove移动事件 规定时间内位置发生变化就会打印

      movementX movementY在规定时间内坐标XY值变化的差值 会为负数     

    box1.addEventListener("mousemove", (e) => {

          console.log(666, e.movementX, e.movementY);

         });

      获取输入框内容

    <input type="text" id="box2" />

         var box2 = document.querySelector("#box2");

         box2.addEventListener("input", (e) => {

           console.log(box2.value, e.target.value);

         }); //获取输入框value值

 box2.addEventListener("keydown", (e) => {

        console.log(e.keyCode, e);

      }); //获取按下对应键位的keyCode值(和ASCll值差不多 只是多了特殊键位的值) e对象中还可以判断各种组合键是否按下