>大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
>
> - github：https://github.com/Daotin/Web
> - 微信公众号：[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
> - 博客园：http://www.cnblogs.com/lvonve/
>
> 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
# 一、为元素绑定多个事件
**前导：**如果一个按钮绑定了多个点击事件，那么点击按钮的时候只会执行最后一个点击事件，前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件，并且每个事件都会执行呢？
## 1、为元素绑定多个事件
```html
```
> 绑定事件的方式：
>
> **addEventListener**: chrome，firefox支持，IE8不支持
>
> **attachEvent**: chrome，firefox不支持，IE8支持
## 2、绑定事件兼容代码
```html
```
>`my("dv").onclick == my$("dv")["onclick"]`
## 3、绑定事件的区别
- 方法名不同；
- 参数个数不同，addEventListener有三个参数，attachEvent有两个参数；
- addEventListener中事件的类型没有 on，attachEvent中事件的类型有on；
- chrome,firefox 支持 addEventListener ，IE8不支持；
chrome,firefox 不支持 attachEvent ，IE8支持；
- 事件中的 this 不同，addEventListener 中的 this 是当前绑定的对象；
attachEvent 中的 this 是 window。
---
# 二、为元素解绑事件
## 1、三种方式
### 1.1、方式一
如果使用 `元素.onclick = function(){};` 的方式绑定对象的话，解绑的方式为 `元素.onclick = null;`
### 1.2、方式二
如果使用 `元素.addEventListener("click", f1, false);` 的方式绑定对象的话，解绑方式为 `元素.removeEventListener("click", f1, false);`
> 注意：这里面不能使用匿名函数，因为需要同一个事件处理函数，而两个匿名函数是两个不同的函数，所以需要使用命名函数。
### 1.3、方式三
如果使用 `元素.attachEvent("onclick", f1);` 的方式绑定对象的话，解绑方式为 `元素.detachEvent("onclick", f1);`
## 2、解绑事件兼容代码
```js
// 为任意元素绑定任意事件
function addAnyEventListener(element, type, func) {
if(element.addEventListener) {
element.addEventListener(type, func, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, func);
} else {
element["on"+type] = func;
}
}
// 为任意元素解绑任意事件
function removeAnyEventListener(element, type, funcName) {
if(element.removeEventListener) {
element.removeEventListener(type, funcName, false);
} else if(element.detachEvent) {
element.detachEvent("on"+type, funcName);
} else {
element["on"+type] = null;
}
}
```
示例：
```html
```