詳解javascript事件綁定使用方法
由于html是從上至下加載的，通常我們?nèi)绻趆ead部分引入javascript文件，那么我們都會(huì)在javascript的開頭添加window.onload事件，防止在文檔問(wèn)加載完成時(shí)進(jìn)行DOM操作所出現(xiàn)的錯(cuò)誤。如果有多個(gè)javascript文件，那么極有可能出現(xiàn)多個(gè)window.onload事件，但是最后起作用的只有一個(gè)，這時(shí)候就需要使用事件綁定來(lái)解決這個(gè)問(wèn)題了。
IE方式
attachEvent(事件名稱, 函數(shù))，綁定事件處理函數(shù)
detachEvent(事件名稱, 函數(shù))，解除綁定
DOM方式
addEventListener(事件名稱,函數(shù), 捕獲)
removeEventListener(事件名稱, 函數(shù), 捕獲)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(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>
這段代碼，運(yùn)行結(jié)果是彈出b，因?yàn)橛袃蓚€(gè)oBtn的點(diǎn)擊事件，但是只執(zhí)行了最后一個(gè)，這時(shí)候就體現(xiàn)出事件綁定的重要性了。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(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)你使用事件綁定的時(shí)候，那么兩次點(diǎn)擊事件都會(huì)執(zhí)行，只是執(zhí)行順序在不同瀏覽器是不同的。在IE中是自下而上執(zhí)行，而在其他瀏覽器中是自上而下，不過(guò)由于alert的特殊性我們可以看出差別，其他語(yǔ)句基本等同于沒(méi)有差別，但是在對(duì)于一些對(duì)時(shí)間要求嚴(yán)格是事件的使用時(shí)還是需要注意的，比如之前有一篇文章圖片輪播中的setInterval對(duì)時(shí)間的細(xì)微的差別最后導(dǎo)致滾動(dòng)混亂。 基于原生javascript的圖片輪播domo
最后將我們的代碼整理成函數(shù)，便于之后的使用
function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}
這時(shí)候如果需要使用多個(gè)window.onload事件其實(shí)就和使用多個(gè)oBtn.onclick事件差不多了。如下調(diào)用函數(shù)即可。
myAddEvent(window,'load',function ()
{
alert('a');
});
myAddEvent(window,'load',function ()
{
alert('b');
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript獲取數(shù)組的最后一個(gè)元素,需要的朋友可以參考下2015-04-04
javascript同頁(yè)面多次調(diào)用彈出層具體實(shí)例代碼
一個(gè)在同一個(gè)頁(yè)面可多次調(diào)用的javascript彈出層效果，有需要的同學(xué)可以參考一下2013-08-08
這篇文章主要介紹了Bootstrap下拉菜單實(shí)例代碼的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
用于改變方法的當(dāng)前對(duì)象2008-11-11
這篇文章主要介紹了a標(biāo)簽中href=""的幾種用法 ,需要的朋友可以參考下2017-08-08
ES6代碼轉(zhuǎn)ES5詳細(xì)教程(babel安裝使用教程)
Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行，這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持，這篇文章主要介紹了ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程),需要的朋友可以參考下2023-01-01
Javascript仿PHP $_GET獲取URL中的參數(shù)
這篇文章主要介紹了Javascript仿PHP $_GET獲取URL中的參數(shù)代碼實(shí)例,需要的朋友可以參考下2014-05-05
javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲
這篇文章主要為大家詳細(xì)介紹了javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
BootStrap selectpicker后臺(tái)動(dòng)態(tài)綁定數(shù)據(jù)
這篇文章主要介紹了BootStrap selectpicker后臺(tái)動(dòng)態(tài)綁定數(shù)據(jù)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
詳解JavaScript面向?qū)ο髮?shí)戰(zhàn)之封裝拖拽對(duì)象
本文主要介紹了JavaScript如何用面向?qū)ο蟮姆绞椒庋b拖拽對(duì)象，通過(guò)3種方式來(lái)實(shí)現(xiàn)，幫助讀者更好的理解其原理2021-06-06