事件对象

• 事件对象上存储着事件发生时的相关信息，当事件触发时 handler函数内部会传入数据（触发时的信息）

 <div class="box"></div>
  <script>
    box=document.querySelector('.box')
    box.addEventListener("click",function(e){
   console.log(e)//在里面装入了系统传入的数据
	})
  </script>

1. 鼠标事件触发时:
   （1）altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
   （2）ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
   （3）metaKey 鼠标事件发生时，是否按下windows/commond键,返回一个布尔
   （4）shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
   （5）pageX 鼠标点击的 X 坐标；(包含body隐藏的) 相当于body的偏移量
   （6）pageY 鼠标点击的 Y 坐标；(包含body隐藏的)
   （7）clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
   （8）screenX screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
   （9）movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
   （10）offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关 相当于元素本身的偏移量

2. 键盘事件触发时:

  <input type="text" class="box">
  <script>
    box=document.querySelector('.box')
    box.addEventListener("keydown",function(e){
	 console.log(e)//在里面装入了系统传入的数据
	 })
  </script>

• oninput的事件对象

  <input type="text" class="box">
  <script>
    box=document.querySelector('.box')
    box.addEventListener("input",function(e){
      console.log(e)//在里面装入了系统传入的数据
	 })

• 有时候传入的形参可能不是事件对象，就需要兼容性写法

<div class="box" onclick="fn(100)"></div>
  <script>
    function fn(e){
      console.log(e)
    }

兼容性写法：

 <div class="box" onclick="fn(100)"></div>
  <script>
    function fn(e){
      e=(e.constructor==PointerEvent&&e)||window.event//兼容写法
      console.log(e)
    }