大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、为元素绑定多个事件

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

1、为元素绑定多个事件

<body><input type="button" value="按钮1" id="btn1"><input type="button" value="按钮2" id="btn2"><!-- <div id="dv"></div> --><script src="common.js"></script><script>// 参数有3个// 参数1：事件的类型（事件的名字），不要on// 参数2：事件处理函数（命名函数或者匿名函数）// 参数3：false// 兼容性：chrome，firefox支持，IE8不支持my$("btn1").addEventListener("click", function() {alert("1");},false)my$("btn1").addEventListener("click", function() {alert("2");},false)my$("btn1").addEventListener("click", function() {alert("3");},false)// 参数有2个// 参数1：事件的类型（事件的名字），要on// 参数2：事件处理函数（命名函数或者匿名函数）// 兼容性：chrome，firefox不支持，IE8支持my$("btn2").attachEvent("onclick", function() {alert("4");});my$("btn2").attachEvent("onclick", function() {alert("5");});my$("btn2").attachEvent("onclick", function() {alert("6");});</script>
</body>

绑定事件的方式：

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

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

2、绑定事件兼容代码

<body><input type="button" value="按钮" id="btn"><script src="common.js"></script><script>// 为任意元素添加任意事件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;}}addAnyEventListener(my$("btn"), "click", function() {console.log("事件1");});addAnyEventListener(my$("btn"), "click", function() {console.log("事件2");});addAnyEventListener(my$("btn"), "click", function() {console.log("事件3");});</script>
</body>

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、解绑事件兼容代码

// 为任意元素绑定任意事件
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;}
}

示例：

<body><input type="button" value="按钮" id="btn1"><input type="button" value="按钮" id="btn2"><script src="common.js"></script><script>function f1() {console.log("第一个");}function f2() {console.log("第二个");}addAnyEventListener(my$("btn1"), "click", f1);addAnyEventListener(my$("btn1"), "click", f2);my$("btn2").onclick = function () {removeAnyEventListener(my$("btn1"), "click", f1);}</script>
</body>

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

从零开始学 Web 系列教程
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新-- github:https://github.com/Daotin/Web 微信公众号:前端队长博客园:http://ww ...
从零开始学 Web 之 BOM（四）client系列
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 ES6（三）ES6基础语法一
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之移动Web（九）微金所案例
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 Ajax（七）跨域
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 JavaScript（三）函数
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
从零开始学 Web 之 JS 高级（二）原型链，原型的继承
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
transitionend过渡监听事件: 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例: <!DOCTYPE html><htm ...

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