从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好，這里是「 從零開始學(xué) Web 系列教程 」，并在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公眾號：Web前端之巔
博客園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在這里我會從 Web 前端零基礎(chǔ)開始，一步步學(xué)習(xí) Web 相關(guān)的知識點，期間也會分享一些好玩的項目。現(xiàn)在就讓我們一起進(jìn)入 Web 前端學(xué)習(xí)的冒險之旅吧！
一、為元素綁定多個事件
前導(dǎo)：如果一個按鈕綁定了多個點擊事件，那么點擊按鈕的時候只會執(zhí)行最后一個點擊事件，前面的點擊事件都被覆蓋了。那么如何為一個按鈕綁定多個相同的事件，并且每個事件都會執(zhí)行呢？
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>// 參數(shù)有3個// 參數(shù)1：事件的類型（事件的名字），不要on// 參數(shù)2：事件處理函數(shù)（命名函數(shù)或者匿名函數(shù)）// 參數(shù)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)// 參數(shù)有2個// 參數(shù)1：事件的類型（事件的名字），要on// 參數(shù)2：事件處理函數(shù)（命名函數(shù)或者匿名函數(shù)）// 兼容性：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、綁定事件的區(qū)別
方法名不同；
參數(shù)個數(shù)不同，addEventListener有三個參數(shù)，attachEvent有兩個參數(shù)；
addEventListener中事件的類型沒有 on，attachEvent中事件的類型有on；
chrome,firefox 支持 addEventListener ，IE8不支持；
chrome,firefox 不支持 attachEvent ，IE8支持；
- 事件中的 this 不同，addEventListener 中的 this 是當(dāng)前綁定的對象；
attachEvent 中的 this 是 window。
二、為元素解綁事件
1、三種方式
1.1、方式一
如果使用 元素.onclick = function(){}; 的方式綁定對象的話，解綁的方式為 元素.onclick = null;
1.2、方式二
如果使用 元素.addEventListener("click", f1, false); 的方式綁定對象的話，解綁方式為 元素.removeEventListener("click", f1, false);
注意：這里面不能使用匿名函數(shù)，因為需要同一個事件處理函數(shù)，而兩個匿名函數(shù)是兩個不同的函數(shù)，所以需要使用命名函數(shù)。
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>總結(jié)
以上是生活随笔為你收集整理的从零开始学 Web 之 DOM（六）为元素绑定与解绑事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Metadata
- 下一篇： 使用vue的transition完成滑动