js繫結事件方法：addEventListener與attachEvent的不同瀏覽器的相容性寫法
阿新 • • 發佈：2019-02-13
js的事件繫結方法中，ie只支援attachEvent,而FF和Chrome只支援addEventListener，所以就必須為這兩個方法做相容處理，原理是先判斷attachEvent只否為真（存在），如果為真則用attachEvent（）方法，否則的話就用addEventListener（）。
另外，為了避免每次繫結事件時都要做判斷，可以封裝一個函式myAddEvent(obj,ev,fn){}。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>繫結</title>
<script>
window.onload = function()
{
var oBtn = document.getElementById("btn1");
//IE attachEvent(事件名，函式)，此方法只有ie支援，FF和Chrome均不支援
/*oBtn.attachEvent("onclick",function()
{
alert("a");
});
oBtn.attachEvent("onclick",function()
{
alert("b");
})*/
//FF和Chrome addEventListener(事件名，函式)，此方法ie不支援
/*oBtn.addEventListener("click",function()
{
alert("a");
});
oBtn.addEventListener("click",function()
{
alert("b");
})*/
//相容寫法：if/else判斷
/*if(oBtn.attachEvent)
{
oBtn.attachEvent("onclick",function()
{
alert("a");
});
oBtn.attachEvent("onclick",function()
{
alert("b");
})
}
else
{
oBtn.addEventListener("click",function()
{
alert("a");
},false);
oBtn.addEventListener("click",function()
{
alert("b");
},false)
}*/
//另外，還可以把這個相容寫法封裝成一個函式，這樣就不用每次繫結事件時都要判斷一下
function myAddEvent(obj,ev,fn) //obj為要繫結事件的元素，ev為要繫結的事件，fn為繫結事件的函式
{
if(obj.attachEvent)
{
obj.attachEvent("on" + ev,fn);
}
else
{
obj.addEventListener(ev,fn,false);
}
}
myAddEvent(oBtn,"click",function()
{
alert("a");
})
myAddEvent(oBtn,"click",function()
{
alert("b");
})
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按鈕"/>
</body>
</html>