JS監(jiān)聽事件的疊加和移除功能
html DOM元素有很多on開頭的監(jiān)聽事件,如onload、onclick等,見DOM事件列表。但是同一種事件,后面注冊(cè)的會(huì)覆蓋前面的:
window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改變窗口大小時(shí),只會(huì)彈出2
addEventListener監(jiān)聽
利用addEventListener添加監(jiān)聽事件,可以重復(fù)添加,并不會(huì)互相覆蓋:
window.addEventListener("resize",function(){ alert(1) }) window.addEventListener("resize",function(){ alert(2) }) // 改變窗口大小時(shí),先后彈出1和2
注意這里面的事件是不帶"on"前綴的。
removeEventListener移除監(jiān)聽
removeEventListener跟addEventListener相對(duì)應(yīng),用于移除事件監(jiān)聽。
如果要移除事件句柄,addEventListener()
的執(zhí)行函數(shù)必須使用外部具名函數(shù),匿名函數(shù)事件是無(wú)法移除的。
// 匿名函數(shù)事件無(wú)法移除 window.addEventListener("resize",function(){ alert(1) }) // 監(jiān)聽具名函數(shù)事件 function myResize(){ alert(2) } window.addEventListener("resize",myResize) // 移除事件監(jiān)聽 window.removeEventListener("resize",myResize)
總結(jié)
以上所述是小編給大家介紹的JS監(jiān)聽事件的疊加和移除,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
el-input 標(biāo)簽中密碼的顯示和隱藏功能的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了el-input 標(biāo)簽中密碼的顯示和隱藏 ,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實(shí)現(xiàn)文件上傳、預(yù)覽、提交的導(dǎo)入E
這篇文章主要介紹了BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實(shí)現(xiàn)文件上傳、預(yù)覽、提交的導(dǎo)入Excel數(shù)據(jù)操作步驟,需要的朋友可以參考下2017-08-08解析javascript 實(shí)用函數(shù)的使用詳解
本篇文章對(duì)javascript中的一些實(shí)用函數(shù)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05框架頁(yè)面高度自動(dòng)刷新的Javascript腳本
框架頁(yè)面高度自動(dòng)刷新,加載index.htm時(shí)候,每隔1秒鐘自動(dòng)調(diào)用腳本刷新框架頁(yè)面代碼,具體實(shí)現(xiàn)如下,感興趣的朋友可以了解下2013-11-11原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例
下面小編就為大家分享一篇原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12JavaScript利用append添加元素報(bào)錯(cuò)的解決方法
這篇文章主要介紹了JavaScript利用append添加元素報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2014-07-07(function(){})()的用法與優(yōu)點(diǎn)
(function(){})()的用法與優(yōu)點(diǎn)...2007-03-03全面解析JavaScript中offsetLeft、offsetTop的用法
本文主要介紹了全面解析JavaScript中offsetLeft、offsetTop的用法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04