1.事件对象

样式代码

 <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

body代码

    <div></div>

什么是事件对象

当触发一个事件以后, 对该事件的一些描述信息

比如:

=> 鼠标点击时的坐标

=> 触发键盘事件时按下的那个按键

每一个事件都会有一个对象来描述这信息, 我们就把这个对象叫做事件对象

浏览器给我们一个 "黑盒子", 叫做 window.event 就是对事件信息的所有描述

语法:

    元素.onclick = function () {  
     console.log(window.event.X轴的坐标点信息)
     console.log(window.event.Y轴的坐标点信息)
 }

缺点: 这个东西有兼容性问题, 在 低版本的 IE 里边能用, 但是在高版本 IE 和 chrome 里边是不好使

所以我们需要换一种使用方式:就是在每一个事件处理函数的形参位置, 默认第一个就是事件对象

1.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)
    }

2.点击事件光标位置的获取

样式代码

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

body代码

    <div></div>

点击事件的光标位置

坐标一定是一个相对的数据

比如:

=> 相对于事件源 (就是我们点击的那个元素)

=> 相对于页面

=> 相对于浏览器窗口

2.0 获取元素

    var box = document.querySelector('div')
    

点击事件

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

        // 2. 相对于页面
        console.log('==========================')
        console.log('相对于页面 X 轴', e.pageX)
        console.log('相对于页面 Y 轴', e.pageY)

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

3.获取键盘按键

body代码

    <input type="text">

3.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

    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')
        }
    }