詳解javascript事件綁定使用方法
由于html是從上至下加載的，通常我們?nèi)绻趆ead部分引入javascript文件，那么我們都會在javascript的開頭添加window.onload事件，防止在文檔問加載完成時進(jìn)行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)格是事件的使用時還是需要注意的，比如之前有一篇文章圖片輪播中的setInterval對時間的細(xì)微的差別最后導(dǎo)致滾動混亂。 基于原生javascript的圖片輪播domo
最后將我們的代碼整理成函數(shù)，便于之后的使用
function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}
這時候如果需要使用多個window.onload事件其實就和使用多個oBtn.onclick事件差不多了。如下調(diào)用函數(shù)即可。
myAddEvent(window,'load',function ()
{
alert('a');
});
myAddEvent(window,'load',function ()
{
alert('b');
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript中內(nèi)置對象Math的介紹及用法案例
Math對象是一個內(nèi)置對象,具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法,不是一個函數(shù)對象,下面這篇文章主要給大家介紹了關(guān)于javascript中內(nèi)置對象Math的介紹及用法案例的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了ES6解構(gòu)賦值的功能與用途,結(jié)合實例形式分析了ES6結(jié)構(gòu)賦值針對函數(shù)參數(shù)、賦值、json等相關(guān)操作使用技巧,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript制作一個簡單的網(wǎng)頁版加減計算器，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡易table表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
本篇文章主要是對Ajax提交與傳統(tǒng)表單提交的區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
最近再做個項目，需要檢查token過期，跳轉(zhuǎn)到登錄頁面，要求用戶重新登錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
不依賴Flash和任何JS庫實現(xiàn)文本復(fù)制與剪切附源碼下載
本篇文章給大家分享的文本復(fù)制與剪切板功能，實現(xiàn)此功能不依賴falsh插件和任何js庫實現(xiàn)的，感興趣的朋友一起看看吧2015-10-10
JavaScript對象數(shù)據(jù)結(jié)構(gòu)基本形式:{ key : value},其中key:value就為對象的一個屬性,key作為屬性名稱,value為屬性值,這值可以是任何JavaScript數(shù)據(jù)類型。2009-10-10
JavaScript實現(xiàn)復(fù)制粘貼剪切功能三種方法
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)復(fù)制粘貼剪切功能的相關(guān)資料,在實際案例的操作過程中,不少人都會遇到這樣的開發(fā)需求,文中通過代碼將三種方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
談及過年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實現(xiàn)一個簡單的放鞭炮動畫效果，感興趣的小伙伴可以了解一下2023-01-01