event什么是事件一个事件由什么东西组成触发谁的事件：事件源触发什么事件：事件类型触发以后做什么：事件处理函数

这是我参与「第四届青训营」笔记创作活动的第10天

什么是事件

一个事件由什么东西组成

触发谁的事件：事件源
触发什么事件：事件类型
触发以后做什么：事件处理函数

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数

我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
  console.log('你点击了 div')
}

当我们点击 div 的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数

事件对象

什么是事件对象？
就是当你触发了一个事件以后，对该事件的一些描述信息
例如：
- 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
- 你触发一个键盘事件的时候，你按的是哪个按钮
- ...
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象
浏览器给了我们一个 黑盒子，叫做 window.event，就是对事件信息的所有描述
- 比如点击事件
- 你点在了 0，0 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- 你点在了 10, 10 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- ...
```
oDiv.onclick = function () {
  console.log(window.event.X轴坐标点信息)
  console.log(window.event.Y轴坐标点信息)
}
```
这个玩意很好用，但是一般来说，好用的东西就会有 兼容性问题
在 IE低版本 里面这个东西好用，但是在 高版本IE 和 Chrome 里面不好使了
我们就得用另一种方式来获取 事件对象

在每一个事件处理函数的行参位置，默认第一个就是 事件对象

oDiv.onclick = function (e) {
  // e 就是和 IE 的 window.event 一样的东西
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

综上所述，我们以后在每一个事件里面，想获取事件对象的时候，都用兼容写法

oDiv.onclick = function (e) {
  e = e || window.event
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

点击事件的光标坐标点获取

刚才即然说了，可以获取到坐标点，那么接下来我们就学习一下怎么获取坐标点
我们的每一个点击事件的坐标点都不是一对，因为要有一个相对的坐标系
例如：
- 相对事件源（你点击的元素）
- 相对页面
- 相对浏览器窗口
- ...
因为都不一样，所以我们获取的 事件对象 里面的属性也不一样