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');