javascript事件的綁定

時間 2019-12-04

原文原文鏈接

因爲html是從上至下加載的，一般咱們若是在head部分引入javascript文件，那麼咱們都會在javascript的開頭添加window.onload事件，防止在文檔問加載完成時進行DOM操做所出現的錯誤。若是有多個javascript文件，那麼極有可能出現多個window.onload事件，可是最後起做用的只有一個，這時候就須要使用事件綁定來解決這個問題了。javascript

IE方式
attachEvent(事件名稱, 函數)，綁定事件處理函數
detachEvent(事件名稱, 函數)，解除綁定
DOM方式
addEventListener(事件名稱,函數, 捕獲)
removeEventListener(事件名稱, 函數, 捕獲)html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</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>

這段代碼，運行結果是彈出b，由於有兩個oBtn的點擊事件，可是隻執行了最後一個，這時候就體現出事件綁定的重要性了。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</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>

當你使用事件綁定的時候，那麼兩次點擊事件都會執行，只是執行順序在不一樣瀏覽器是不一樣的。在IE中是自下而上執行，而在其餘瀏覽器中是自上而下，不過因爲alert的特殊性咱們能夠看出差異，其餘語句基本等同於沒有差異，可是在對於一些對時間要求嚴格是事件的使用時仍是須要注意的，好比以前有一篇文章圖片輪播中的setInterval對時間的細微的差異最後致使滾動混亂。基於原生javascript的圖片輪播domo

最後將咱們的代碼整理成函數，便於以後的使用

function myAddEvent(obj, ev, fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on'+ev, fn);
	}
	else
	{
		obj.addEventListener(ev, fn, false);
	}
}

這時候若是須要使用多個window.onload事件其實就和使用多個oBtn.onclick事件差很少了。以下調用函數便可。

myAddEvent(window,'load',function ()
{
	alert('a');
});
myAddEvent(window,'load',function ()
{
	alert('b');

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。