js綁定事件和解綁事件
在js中綁定多個事件用到的是兩個方法:attachEvent和addEventListener,但是這兩個方法又存在差異性
attachEvent方法 只支持IE678,不兼容其他瀏覽器
addEventListener方法 兼容火狐谷歌,不兼容IE8及以下
addEventListener方法
div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春雨綿綿"); } function fn2(){ console.log("到處潮濕"); }
attachEvent方法
div.attachEvent('onclick',fn); div.attachEvent('onclick',fn2); function fn(){ console.log("春雨綿綿"); } function fn2(){ console.log("到處潮濕"); }
注意點:attachEvent方法綁定的事件是帶on的,addEventListener綁定的事件是不帶on的
下面我寫了一個兼容了IE和火狐谷歌的方法
var div=document.getElementsByTagName("div")[0]; addEvent('click',div,fn) function addEvent(str,ele,fn){ ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn); } function fn(){ console.log("春雨綿綿"); }
這樣就完美的解決了兼容性的問題
有綁定事件的話,那就肯定有解綁事件,但是解綁事件和綁定事件一樣,萬惡的IE還是會搞特殊化
detachEvent方法 只支持IE678,不兼容其他瀏覽器
removeEventListener方法 兼容火狐谷歌,不兼容IE8及以下
detachEvent方法寫法:
ele.detachEvent("onclick",fn);
removeEventListener的寫法:
ele.removeEventListener("click",fn);
下面我寫了一個兼容性的方法給大家參考,實現(xiàn)也是很簡單
function remove(str,ele,fn){ ele.detachEvent?ele.detachEvent("on"+str,fn):ele.removeEventListener(str,fn); }
注意點:不管是綁定事件attachEvent還是刪除事件detachEvent都是要加on的,removeEventListenser和addEventListenser則不需要加on
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家
相關(guān)文章
A標(biāo)簽觸發(fā)onclick事件而不跳轉(zhuǎn)的多種解決方法
一個標(biāo)簽僅僅是要觸發(fā)onclick行為,遇到了A標(biāo)簽觸發(fā)onclick事件時不執(zhí)行跳轉(zhuǎn),下面與大家分享下四種解決方法,感興趣的朋友可以參考下哈2013-06-06解析微信JS-SDK配置授權(quán),實現(xiàn)分享接口
這篇文章是微信開發(fā)的很多前置條件,包括了服務(wù)端基于JAVA的獲取和緩存全局的access_token,獲取和緩存全局的jsapi_ticket,以及前端配置授權(quán)組件封裝,調(diào)用分享組件封裝。需要的朋友可以看下2016-12-12基于zepto.js實現(xiàn)仿手機QQ空間的大圖查看組件ImageView.js詳解
這篇文章主要介紹了基于zepto.js實現(xiàn)仿手機QQ空間的大圖查看組件ImageView.js的源碼和使用方法,并附上一個使用ImageView.js的實例,這里分享給大家,有需要的小伙伴參考下。2015-03-03JS按鈕倒計時并跳轉(zhuǎn)到新地址的實現(xiàn)代碼
在完成某項操作時,按鈕上有個倒計時效果,倒計時結(jié)束后,跳轉(zhuǎn)到新地址,這篇文章主要介紹了JS按鈕倒計時并跳轉(zhuǎn)到新地址,需要的朋友可以參考下2023-02-02javascript面向?qū)ο蟪绦蛟O(shè)計高級特性經(jīng)典教程(值得收藏)
這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計高級特性,結(jié)合實例形式詳細(xì)講述了javascript對象的創(chuàng)建,訪問,刪除,對象類型,擴展等,需要的朋友可以參考下2016-05-05