JS的事件对象

* 什么是事件对象

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

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

    box.onclick = function (e) {
      // e = e || window.event  扩展 了解即可
      // console.log(e.X轴的坐标)
      // console.log(e.Y轴的坐标)
      console.log(e)
    }

* 点击事件的光标位置的获取

 *    坐标一定是一个相对的数据
 *    
 *    比如：
 *        => 相对于事件源（就是我们点击的那个元素)
 *        => 相对于页面
 *        => 相对于浏览器窗口

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

    box.onclick = function (e) {
      // 1.相对于事件源 的鼠标坐标点   相对于点击的元素的边框内侧开始计算
      console.log('相对于事件源X轴：', e.offsetX)
      console.log('相对于事件源Y轴：', e.offsetY)
      // 2.相对于页面
      console.log('相对于页面X轴：', e.pageX)
      console.log('相对于页面Y轴：', e.pageY)
      // 2.相对于浏览器窗口
      console.log('相对于浏览器窗口X轴：', e.clientX)
      console.log('相对于浏览器窗口Y轴：', e.clientY)
    }

* 获取键盘按键

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

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

• 现在推荐我们使用：e.key

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

• 组合按键 alt/shift/ctrl + Key

inp.onkeyup = function (e) {
    // console.log(e.ctrlKey)
    // console.log(e.altKey)
    // console.log(e.keyCode) //q === 81
    // 组合按键触发
    if(e.altKey && e.keyCode === 81) {
        console.log('按下了组合按键 alt + q')
    }
}