本篇文章主要介紹了js綁定事件和綁定事件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
在js中綁定多個事件用到的是兩個方法:attachEvent和addEventListener,但是這兩個方法又存在差異性
attachEvent方法 只支援IE678,不相容其他瀏覽器
#addEventListener方法 相容火狐Google,不相容IE8及以下
#addEventListener方法
p.addEventListener('click',fn);
p.addEventListener('click',fn2);
function fn(){ console.log("春雨绵绵"); }
function fn2(){
console.log("到处潮湿");
}attachEvent方法
p.attachEvent('onclick',fn);
p.attachEvent('onclick',fn2);
function fn(){ console.log("春雨绵绵"); }
function fn2(){
console.log("到处潮湿");
}注意點:attachEvent方法綁定的事件是帶on的,addEventListener綁定的事件是不帶on的
下面我寫了一個兼容了IE和火狐谷歌的方法
var p=document.getElementsByTagName("p")[0];
addEvent('click',p,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);
下面我寫了一個相容性的方法給大家參考,實作也是很簡單
function remove(str,ele,fn){
ele.detachEvent?ele.detachEvent("on"+str,fn):ele.removeEventListener(str,fn);
}注意點:不管是綁定事件attachEvent還是刪除事件detachEvent都是要加on的,removeEventListenser和addEventListenser則不需要加on
以上是詳解js中的綁定事件和解綁定事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
