EVENT 事件

一、EVENT  事件

1、什么是事件？

- 一个事件由什么东西组成

  - 触发谁的事件：事件源       某个标签

  - 触发什么事件：事件类型     onclick   点击

  - 触发以后做什么：事件处理函数   写一个函数 执行这个操作

2、事件对象

- 就是你触发了一个事件（点击  双击  拖拽），对该事件的一些描述信息  比如在浏览器的位置  或者点击键盘或者那个按钮   -----对你的触发的事件进行精确描述的

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

 3、**兼容性问题**

- 在 `IE低版本` 里面这个东西好用，但是在 `高版本IE` 和 `Chrome` 里面不好使了 

 ```javascript

  oDiv.onclick = function (e) {

    e = e || window.event            e为高版本    window.event低版本

    console.log(e.X轴坐标点信息)

    console.log(e.Y轴坐标点信息)

  }

  ```

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

- 例如：

  - 相对事件源（你点击的元素）

  - 相对页面

  - 相对浏览器窗口

①相对于你点击的元素

- `offsetX` 和 `offsetY`

- 是相对于你点击的元素的边框内侧开始计算 (就是你的内容区 0,0)

②相对于浏览器窗口你点击的坐标点

- `clientX` 和 `clientY`

- 是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标（可视窗口的大小）

③相对于页面你点击的坐标点

- `pageX` 和 `pageY`

- 是相对于整个页面的坐标点，不管有