一、事件基础
1.事件函数
obj.on-事件名=fn
定义事件的时候，事件函数不会自动执行，当事件触发的时候，会执行
2.事件对象
1）事件对象：当浏览器执行事件的时候，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在事件函数中进行传递
Event
常见属性：
clientX
clinetY 鼠标相对客户端的位置
pageX
pageY 鼠标相对于页面的位置
type 事件类型
target 事件作用的节点对象
2）事件的兼容性：
在低版本的IE和火狐上，事件传递机制不一样，需要通过window.event来获取事件
window.event||e
二、事件绑定和取消
1. 事件绑定
添加事件的做法，若出现为同一个节点绑定了同名的事件，会出现覆盖效果。
addEventListener(事件名,事件函数,isBubble)
isBubble :默认为false 事件是冒泡机制 true 事件为捕获机制
注意：事件名没有on前缀
removeEventListener(事件名,事件函数,isBubble)
注意：一定要保证移除事件时和添加事件时是同一个事件函数
事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener,
在低版本IE中可以使用：
attachEvent(事件名,事件函数) 绑定事件
detachEvent 取消事件
注意：事件名 包含on前缀
两种事件绑定的区别：
1.addEventListener：
事件名没有on前缀
可以选择冒泡或者捕获机制
this 指事件调用者
同名事件的执行顺序：先添加先执行
2.attachEvent
事件名需要添加on前缀
不能选择冒泡或捕获的机制
this 指window对象
同名事件的执行顺序：后添加先执行
三、事件流
事件流：事件被触发之后会在DOM树的节点之间传递
冒泡：事件由最具体的元素(事件的触发者),层层向外传递（传递给父节点），直到window 对象停止
捕获：事件由最外层元素(window),层层向内传递，直到最具体的元素
事件流机制有时候会对页面效果造成一些影响，所以需要拦截事件的冒泡：
兼容性写法：
window.event?window.cancelBubble=true:e.stopPropagation()
四、拦截浏览器的默认行为
拦截浏览器自带的一些事件行为，例如：a超链接的跳转等....
对象.事件名 return false
对象.addEventListener() e.preventDefault()
对象.attachEvent() e.returnValue=false; retrun false;
五、常见事件
右键事件：oncontextmenu
键盘事件：onkeydown onkeyup onkeypress
键盘事件的属性：
key 在IE中不支持 键名称
keyCode 键码
滚轮事件：
Onwheel 标准浏览器和IE
对象.addEventListener(“DOMMouseScroll”,事件函数,false) 火狐
滚轮事件对：
wheelDelta 标准浏览器和IE 120 -120 下 120 上
detail 获取 3
六、事件的委托
事件委托：事件添加元素父节点(原理：事件的冒泡机制)
将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件
### 事件高级用法及兼容写法
#### 一、事件基础
1. **事件函数**
```javascript
obj.on-事件名 = fn;
```
定义事件时，事件函数并不会立即执行，只有当触发相应事件时才会执行。
2. **事件对象**
当浏览器执行事件时，会将所有与该事件相关的信息（如鼠标位置、触发事件的目标等）封装成一个对象，并将此对象传递给事件处理函数。
**常见属性**
- `clientX` 和 `clientY`: 分别表示鼠标相对于视口的位置（即浏览器窗口）。
- `pageX` 和 `pageY`: 表示鼠标相对于整个文档的位置。
- `type`: 事件类型。
- `target`: 触发事件的元素。
**兼容性问题**
- 在某些低版本的浏览器（如IE和旧版Firefox）中，需要使用 `window.event` 来获取事件对象，例如：
```javascript
window.event || e;
```
#### 二、事件绑定和取消
1. **事件绑定**
可以通过多种方式为元素绑定事件处理函数。对于同一元素绑定相同类型的事件时，后面的绑定会覆盖前面的绑定。
- **addEventListener** 方法
```javascript
element.addEventListener(事件名, 事件函数, isBubble);
```
其中，`isBubble` 参数用于指定事件的传播方式，默认为 `false`（冒泡模式），设置为 `true` 时为捕获模式。需要注意的是，事件名无需带有 `on` 前缀。
- **removeEventListener** 方法
```javascript
element.removeEventListener(事件名, 事件函数, isBubble);
```
移除事件时，必须确保移除的事件函数与添加时完全一致。
- **低版本 IE 的事件绑定**
在 IE 6/7/8 中，使用 `attachEvent` 和 `detachEvent` 方法来绑定和取消事件。
```javascript
element.attachEvent("on" + 事件名, 事件函数);
element.detachEvent("on" + 事件名, 事件函数);
```
这里事件名需要带有 `on` 前缀。
**注意事项**
- 使用 `addEventListener` 和 `removeEventListener` 时，事件名无需 `on` 前缀。
- 使用 `attachEvent` 和 `detachEvent` 时，事件名需要加上 `on` 前缀。
- `addEventListener` 的 `this` 指向触发事件的元素，而 `attachEvent` 的 `this` 指向 `window` 对象。
- 同名事件的执行顺序不同：`addEventListener` 是按照添加顺序执行，`attachEvent` 则相反。
2. **事件绑定兼容性写法**
为了确保代码能在不同浏览器中运行，可以采用以下兼容性写法：
```javascript
if (element.addEventListener) {
element.addEventListener(事件名, 事件函数, isBubble);
} else if (element.attachEvent) {
element.attachEvent("on" + 事件名, 事件函数);
}
```
#### 三、事件流
事件流是指事件如何在 DOM 结构中的各个节点间传播。
- **冒泡机制**: 事件从最具体的元素（触发事件的元素）开始，向上逐级传递到最顶层的节点（通常是 `document` 或 `window`）。
- **捕获机制**: 相反地，事件从最顶层的节点开始，向下逐级传递到最具体的元素。
#### 四、拦截事件冒泡
有时我们需要阻止事件的进一步传播，可以通过以下方式实现：
```javascript
if (window.event) {
window.event.cancelBubble = true;
} else {
e.stopPropagation();
}
```
#### 五、拦截浏览器默认行为
在某些情况下，我们希望阻止浏览器的默认行为，例如阻止超链接的跳转行为。
- **使用 `return false`**
```javascript
element.onclick = function(e) {
return false;
};
```
- **使用 `preventDefault`**
```javascript
element.addEventListener("click", function(e) {
e.preventDefault();
}, false);
```
- **使用 `attachEvent`**
```javascript
element.attachEvent("onclick", function(e) {
e.returnValue = false;
return false;
});
```
#### 六、常见事件
- **右键点击事件** (`oncontextmenu`)
- **键盘事件** (`onkeydown`, `onkeyup`, `onkeypress`)
- `key`: 键盘键名，在 IE 中不支持。
- `keyCode`: 键盘键码。
- **滚轮事件**
- `Onwheel`: 支持标准浏览器和 IE。
- `DOMMouseScroll`: 火狐浏览器专用。
```javascript
element.addEventListener("DOMMouseScroll", 事件函数, false);
```
- `wheelDelta`: 表示滚动方向，正值代表向上滚动，负值则相反。
- `detail`: 火狐浏览器专用，表示滚动的方向和幅度。
#### 七、事件委托
事件委托是一种优化技巧，它利用了事件冒泡机制的特点，将事件处理函数绑定到父元素上，而不是直接绑定到每个子元素上。
```javascript
var o = document.querySelector('div');
// 动态添加按钮
document.querySelector('#btn').onclick = function() {
o.innerHTML += "<button>点我</button>";
};
// 处理点击事件
o.onclick = function(e) {
var target = e.target || window.event.srcElement;
if (target.tagName.toLowerCase() === 'button') {
// 执行相关操作
console.log('Button clicked!');
}
};
```
这种方法不仅减少了事件监听器的数量，提高了性能，而且对于动态添加的元素也有效。
