這篇文章主要介紹了JavaScript事件綁定的方法,感興趣的可以參考一下。
當(dāng)你成功的時候,你說的所有話都是真理。 ——馬云
由于html是從上至下加載的,通常我們?nèi)绻趆ead部分引入javascript文件,那么我們都會在javascript的開頭添加window.onload事件,防止在文檔問加載完成時進行DOM操作所出現(xiàn)的錯誤。如果有多個javascript文件,那么極有可能出現(xiàn)多個window.onload事件,但是最后起作用的只有一個,這時候就需要使用事件綁定來解決這個問題了。
IE方式
attachEvent(事件名稱, 函數(shù)),綁定事件處理函數(shù)
detachEvent(事件名稱, 函數(shù)),解除綁定
DOM方式
addEventListener(事件名稱,函數(shù), 捕獲)
removeEventListener(事件名稱, 函數(shù), 捕獲)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
alert('a');
};
oBtn.onclick=function ()
{
alert('b');
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按鈕" />
</body>
</html>
這段代碼,運行結(jié)果是彈出b,因為有兩個oBtn的點擊事件,但是只執(zhí)行了最后一個,這時候就體現(xiàn)出事件綁定的重要性了。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
//IE瀏覽器
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);
}
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按鈕" />
</body>
</html>
當(dāng)你使用事件綁定的時候,那么兩次點擊事件都會執(zhí)行,只是執(zhí)行順序在不同瀏覽器是不同的。在IE中是自下而上執(zhí)行,而在其他瀏覽器中是自上而下,不過由于alert的特殊性我們可以看出差別,其他語句基本等同于沒有差別,但是在對于一些對時間要求嚴(yán)格是事件的使用時還是需要注意的。
1、將代碼整理成函數(shù),便于使用:
function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}
2、如果需要使用多個window.onload事件其實就和使用多個oBtn.onclick事件差不多了。如下調(diào)用函數(shù)
myAddEvent(window,'load',function ()
{
alert('a');
});
myAddEvent(window,'load',function ()
{
alert('b');