事件类型
事件分类
首先我们在DOM上有一个Event类，这个类包含了：load，unload，error，select，abort等事件
然后，这些父类首先会衍生出子类UIEvent，包含了：resize，scroll等
再然后，由UIEvent衍生出了FouseEvent，包含了：blur，focus，focusin，focusout等
再接着，UIEvent还衍生出了InputEvent，包含了：beforeinput，input等事件
还有，UIEvent还衍生出了KeyboardEvent，包含了：keydown，keyup等事件
还有最常用的鼠标事件，MouseEvent，包含了：click，dbclick，mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover，mouseup等事件
由MouseEvent衍生出了WheelEvent，滚轮事件：wheel
MouseEvent
| 事件类型 | 解释 | 是否冒泡 | 元素 | 默认操作 | 元素例子 |
| click | 单击 | yes | Element | fouse/activation | div |
| dbclick | 双击 | yes | Element | fouse/activation/selection | div |
| mousedown | 点下鼠标触发 | yes | Element | dag/scroll/text selection | div |
| mouseup | 松开鼠标触发 | yes | Element | context menu | div |
| mousemove | 鼠标移动 | yes | Element | none | div |
| mouseout | 离开时触发 | yes | Element | none | div |
| mouseover | 进入后持续触发 | yes | Element | none | div |
| mouseenter | 进入时触发 | no | Element | none | div |
| mouseleave | 离开时触发 | no | Element | none | div |
mouseover和mouseenter虽然都是进入是触发，然后，还是有区别的，mouseover进入元素或其子元素时都会触发mouseover事件，而mouseenter只有进入元素本身时才会触发事件
mouseout和mouseleave同理，和mouseover和mouseenter一样的原理
属性
clientX，clentY：指的是窗口的可视区域，点击位置到浏览器左边框，浏览器上边框的记录
screenX，screenY：指的是整个屏幕的区域，点击位置到屏幕的左侧距离，到屏幕的顶部距离
ctrlKey，shiftKey，altKey，metaKey：对应的按键
button(0,1,2)：0-左键，1-中间剑，2-右键
MouseEvent顺序
从元素A上方移动，触发的顺序为：
mousemove -> mouseover -> mouseenter - >mousemove - > mouseout -> mouseleave
点击元素，触发的顺序为：
mousedown -> [mousemove]（可能鼠标有微小的移动） -> mouseup ->click
案例：鼠标拖动DIV（等我弄明白了上传）
WheelEvent
滚轮事件
| 事件类型 | 是否冒泡 | 元素 | 默认操作 | 元素例子 |
| wheel | yes | Element | scrool or zoom document | div |
WheelEvent对象
属性（都是只读属性）
delaMove：滚动的数量，比如是一行还是一屏
deltaX：水平滚动
deltaY：纵向滚动
deltaZ：纵深滚动
FouseEvent
| 事件类型 | 是否冒泡 | 元素 | 默认操作 | 元素例子 |
| blur | no | window,Element | none | window,input |
| fouce | no | window,Element | none | window,input |
| fousin | yse | window,Element | none | window,input |
| fousout | yes | window,Element | none | window,input |
fousin和fouse的区别在于可以冒泡，fouseout和blur的区别也在于可以冒泡
属性
relatedTarget：这个是指向失焦的元素，比如radio当点击一个radio时，另外一个就会失去焦点，那么这个属性指向的就是失去焦点的那个元素
KeyboardEvent
键盘事件
| 事件类型 | 是否冒泡 | 元素 | 默认事件 | 元素例子 |
| keydown | yes | Element | beforeinput/input fouse/blur activation |
div,input |
| keyup | yes | Element | none | div,input |
属性
key：指按下的哪个键
code：指按下键的码值
ctrlKey，shiftKey，altKey，metaKey：常用的cltrl键，shift键等
repeat：是否连续按下
CompositionEvent
辅助事件，有三个属性，分别为：compositionstart，compositionupdate，compositionend，用来检测输入法的，大致就是输入框搜索的时候要等到输入法输入结束后才对输入框内的输入进行后台查询，否则的话每次按下键盘上的键都要去和后台搜索，而且检测的是英文实际我们检测的是中文
基类Event
| 事件类型 | 是否冒泡 | 元素 | 默认操作 | 元素例子 |
| load | No | Window document element |
none | windiwo,image iframe |
| unload | No | Window document element |
none | window |
| error | No | window element |
none | window,image |
| select | No | element | none | input,textarea |
| abort | No | window element |
none | window,image |
load，窗口加载的时候
unload，窗口关闭的时候
error，出现错误的时候执行
abort，加载的时候按下了esc键触发
Image
load
error：发生错误时，显示，可以给image加上，例如
<image onerror="xxx.jpg">abort
UIEvent
| 事件类型 | 是否冒泡 | 元素 | 默认操作 | 元素例子 |
| resize | no | window,element | none | window,iframe |
| scorll | no/yes | document,element | none | document,div |
resize：主要是当我们浏览器的窗口出现大小变换的时候触发
scorll：当页面滚动的时候触发