从零开始学 Web之DOM（六）为元素绑定与解绑事件

大家好，这里是「从零开始学 Web 系列教程」，并在以下地址同步更新......

github：https://github.com/Daotin/Web

CSDN：https://blog.csdn.net/lvonve/

博客园：http://www.cnblogs.com/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关知识，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、为元素绑定多个事件

前导：如果一个按钮绑定了多个点击事件，那么点击按钮的时候只会执行最后一个点击事件，前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件，并且每个事件都会执行呢？

1、为元素绑定多个事件

绑定事件的方式：

addEventListener: chrome，firefox支持，IE8不支持

attachEvent: chrome，firefox不支持，IE8支持

2、绑定事件兼容代码

3、绑定事件的区别

方法名不同；

参数个数不同，addEventListener有三个参数，attachEvent有两个参数；

addEventListener中事件的类型没有 on，attachEvent中事件的类型有on；

chrome,firefox 支持 addEventListener ，IE8不支持；

chrome,firefox 不支持 attachEvent ，IE8支持；

事件中的 this 不同，addEventListener 中的 this 是当前绑定的对象；

attachEvent 中的 this 是 window。

二、为元素解绑事件

1、三种方式

1.1、方式一

如果使用 的方式绑定对象的话，解绑的方式为

1.2、方式二

如果使用 的方式绑定对象的话，解绑方式为

注意：这里面不能使用匿名函数，因为需要同一个事件处理函数，而两个匿名函数是两个不同的函数，所以需要使用命名函数。

1.3、方式三

如果使用 的方式绑定对象的话，解绑方式为

2、解绑事件兼容代码

示例：

欢迎关注

Web前端之巅

念念不忘，必有回响。