26 JS中事件对象以及点击事件光标位置的获取和键盘按键的获取

1.什么是事件对象?

当触发一个事件以后,对该事件的一些描述信息
比如:
 => 鼠标点击时的坐标
 => 触发键盘事件时按下的哪个对象
 每一个事件都会有一个对象来描述这些信息,我们就把这个对象叫做事件对象
 浏览器给我们一个 "黑盒子",叫做 window.event   就是对事件信息的所有描述
 
 
 
 语法:元素.onclick = function(){
               console.log(window.event.X轴的坐标点信息)
               console.log(window.event.Y轴的坐标点信息
       }
 缺点:这个东西有兼容性问题,在低版本的IE里能使用,但是在高版本 IE和chrome里边不好使
 
 所以我们需要换一种使用方式:
   就是在每一个事件处理函数的形参位置,默认第一个就是事件对象

    <div></div>

    //0.获取元素
    var box = document.querySelector('div')

    box.onclick = function(e){
      // e = e || window.event //防止浏览器在IE中使用(了解)
      // console.log(e.X轴的坐标)
      // console.log(e.Y轴的坐标)
      console.log(e)
    }

2. 点击事件的光标位置

• 相对于事件源(就是我们点击的那个元素)
• 相对于页面
• 相对于浏览器窗口

<style>
    body{
      height: 5000px;
    }
    div{
      width: 300px;
      height: 300px;
      padding: 20px;
      border: 10px solid #333;
      margin: 50px;
      background-color: pink;
      position: fixed;
      top: 300px;
    }
</style>

<div></div>

    //0.获取元素
    var box = document.querySelector('div')

    box.onclick = function(e){
      //1.相对于事件源 的鼠标坐标点     相对于点击的元素的边框内侧
      console.log('===================')
      console.log('相对于事件源 X轴',e.offsetX)
      console.log('相对于事件源 y轴',e.offsetY)

      console.log('===================')

      //2.相对于页面
      console.log('相对于页面的 x轴',e.pageX)
      console.log('相对于页面的 y轴',e.pageY)

      console.log('===================')

      //3.相对于浏览器窗口
      console.log('相对于浏览器窗口 x轴',e.clientX)
      console.log('相对于浏览器窗口 y轴',e.clientY)
    }

3.获取键盘按键

• 键盘的每一个按键都有一个自己的编码,我们可以通过事件对象.keyCode 来获取(e.keyCode 已经被移除了,但是很多主流浏览器还支持使用)
• 现在推荐我们使用: e.key

<input type="text">

<script>
//0.获取元素
var inp = document.querySelector('input')

inp.onkeyup = function(e){
  console.log('e.keyCode:',e.keyCode,'e.key:',e.key)
}

    /**
     * 组合按键  alt / shift / ctrl
     * 
     * 
    */
    
    inp.onkeyup = function(e){
      // console.log(e.ctrlKey)
      // console.log(e.altKey)
      // console.log(e.altCode) // q===81
      if(e.altKey && e.keyCode === 81){
        console.log('按下了组合按键 alt + q')
      }
    }
</script>