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)文章
這篇文章主要介紹了webpack自動打包和熱更新的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了JS實現(xiàn)仿微博可關(guān)閉彈出層效果,涉及JavaScript彈出窗口的設(shè)置及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了js控制文本框只輸入數(shù)字和小數(shù)點的方法,實例分析了javascript使用正則表達式實現(xiàn)限制數(shù)字和小數(shù)點的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
本文是對自己這么長時間以來學(xué)習(xí)javascript面向?qū)ο蟮目偨Y(jié)，這里針對封裝和繼承結(jié)合實例進行了詳細分析，給有相同需求的小伙伴們參考下吧。2014-11-11
這篇文章主要給大家介紹了關(guān)于利用JS如何實現(xiàn)scroll自定義滾動效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
JavaScript中的數(shù)據(jù)劫持和數(shù)據(jù)代理使用
文章主要介紹了數(shù)據(jù)劫持（Object.defineProperty）和數(shù)據(jù)代理（Proxy）兩種方式在JavaScript中的應(yīng)用,并通過生活中的例子來詳細解釋它們的工作原理和使用場景,文章還對比了兩種方式的優(yōu)缺點,并指出了它們在Vue.js中的應(yīng)用2025-02-02
一個檢測表單數(shù)據(jù)的JavaScript實例
這篇文章主要介紹了一個檢測表單數(shù)據(jù)的JavaScript實例，很簡單，很實用，比較適合初學(xué)者2014-10-10
怎么限制input的text里輸入的值只能是數(shù)字(正則、js)
這篇文章主要通過正則表達式和JS代碼限制input的text里輸入的值只能是數(shù)字的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了img的href和src取變量及賦值的方法,需要的朋友可以參考下2014-04-04
bootstrap實現(xiàn)嵌套模態(tài)框的實例代碼
這篇文章主要介紹了bootstrap實現(xiàn)嵌套模態(tài)框的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01