當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/18 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了从零开始学 Web 之 DOM（六）为元素绑定与解绑事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

大家好，這里是「從零開始學 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"><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（六）为元素绑定与解绑事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Metadata
下一篇：使用vue的transition完成滑动