从零开始学 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前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180622G1J1H000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券