|
事件就是文档或浏览器窗口中发生 的一些特定的交互瞬间
事件三要素
事件目标：发生的事件与之相关的对象
事件处理程序：处理或相应事件的函数
事件对象：与特定事件相关且包含有关该事件详细信息的对象
事件流
页面接收事件的顺序
1.冒泡事件（IE事件）
事件由一个具体的元素接收，然后又逐步传递到不具体的节点
(当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发)
特点：从内往外传递
阻止事件冒泡：event.stopPropagation();在哪个元素要阻止就在哪个元素里添加
2.事件捕获
事件由不太具体的节点接收到，然后传递到具体的节点上
特点：从外往内传递
事件处理程序
事件就是用户或浏览器自身执行的某种动作，响应某个事件的函数为事件处理程序，事件处理程序以"on"开头
作用：绑定事件
例如：onclick，onmouseover，onload …
节点：可以是div，也可以是button…等
1.非IE事件处理程序
addEventListener()
绑定事件监听器
参数：1.事件类型（click，mouseover 等）
??????????2.事件处理函数；当绑定的事件被触发时要执行的操作
???????????3.boolean？ 用来决定事件流类型，事件冒泡false ，事件捕获true
removeEventListener()
作用：移除事件
参数：1.要删除的事件名
??????????? 2.事件处理函数
??????????? 3.boolean？ 事件冒泡false ，事件捕获true
2.IE事件处理程序
attachEvent()
作用：事件绑定
参数：事件处理程序名称
?????????? 事件处理函数
detachEvent()
作用：事件移除
参数：事件处理程序名称
?????????? 事件处理函数
?????????? 事件处理程序都被添加到冒泡阶段
事件对象
在触发DOM的某个事件时，会产生一个事件对象event
这个包含所有与事件相关的信息
浏览器默认会把event传入到事件处理函数中
event对象的属性都是只读属性
| 属性 | 类型 | 说明 |
|---|
| type | String | 事件类型，需要一个函数，处理多个事件时，可使用该属性 | | bubbles | Boolean | 事件是否冒泡 | | cancelable | Boolean | 是否可取消事件默认行为 | | target | Element | 事件目标 |
事件类型
1.UI事件
| 触发条件 |
|---|
| load | 在页面完全加载后会在window上触发这个事件，如果是图像加载完成后 会在img元素上触发window.onload | | unload | 在页面完全卸载后会在window上触发这个事件 | | select | 当用户选择文本框中的字符时会触发 | | resize | 当浏览器窗口被调整宽高时会触发 会重复触发 | | scroll | 滚动条滚动时会触发 会重复触发 |
2.焦点事件
| 触发条件 |
|---|
| blur | 元素失去焦点的时候触发 | | focus | 元素获得焦点的时候触发，不支持冒泡 |
3.鼠标事件
| 触发条件 |
|---|
| click | 点击鼠标的主按钮 点击触控板 | | dblclick | 双击鼠标的主要按钮 | | mousedowm | 任意鼠标按钮按下时触发 | | mouseup | 任意鼠标按钮抬起（释放）时触发 | | mousemove | 鼠标在元素内部移动时会重复触发 | | mousewheel | 滚轮事件 | | mouseover | 鼠标位于元素外部，将其首次移入另一个元素边界之内时触发（支持子元素） | | mouseenter | 鼠标光标从元素外部首次移动到元素范围内激发，不冒泡（不支持子元素） | | mouseout | 在位于元素上方的鼠标光标移入到另外一个元素中（支持子元素） | | mouseleave | 在位于元素上方的鼠标光标移动到元素范围之外时触发（不支持资源） |
4.键盘事件
| 触发条件 |
|---|
| keydown | 按下键盘任意键触发，如果按住不放会重复触发 | | keypress | 按下键盘字符键触发，如果按住不放会重复触发 | | keyup | 释放按键时触发 |
|