js中怎么绑定事件

最新推荐文章于 2023-10-29 10:11:12 发布

小小樟鱼

最新推荐文章于 2023-10-29 10:11:12 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/web_note/article/details/52799948

版权

我们想用两个window.onload的时候，起作用的其实是最后一个。就和变量一个道理，如果写 var a=5; a=9; 最后a是9；同学说，可以写到一个 window.onload里面，但是实战项目中，我们都是分工合作的，每个人都想用自己的 window.onload，这个时候就需要用到事件绑定了。

    
    <script>
window.onload=function ()
{
	alert('a');
};
window.onload=function ()
{
	alert('b');
};
</script>

l IE 方式

l attachEvent ( 事件名称 , 函数 ) ，绑定事件处理函数

l detachEvent ( 事件名称 , 函数 ) ，解除绑定

l DOM 方式

l addEventListener ( 事件名称 , 函数 , 捕获 )

l removeEventListener ( 事件名称 , 函数 , 捕获 )

下面我们看一个小例子，如何进行事件绑定：

   
   <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	
	//attachEvent(事件名， 函数)
	//IE
	/*
	oBtn.attachEvent('onclick', function ()
	{
		alert('a');
	});
	oBtn.attachEvent('onclick', function ()
	{
		alert('b');
	});
	*/
	
	//FF
	//addEventListener(事件名, 函数, false)
	oBtn.addEventListener('click', function ()
	{
		alert('a');
	}, false);
	oBtn.addEventListener('click', function ()
	{
		alert('b');
	}, false);
	
	/*
	oBtn.onclick=function ()
	{
		alert('a');
	};
	
	oBtn.onclick=function ()
	{
		alert('b');
	};*/
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
</body>
</html>

js中好东西大都不兼容，我们的兼容写法：

   
   <script>
window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	
	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>

这个比较常用，我们封装成函数：

   
   <script>
function myAddEvent(obj, ev, fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on'+ev, fn);
	}
	else
	{
		obj.addEventListener(ev, fn, false);
	}
}
window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	
	myAddEvent(oBtn, 'click', function (){
		alert('a');
	});
	
	myAddEvent(oBtn, 'click', function (){
		alert('b');
	});
};
</script>

回到之前的问题，我们想用两个window.onload:

    
    <script>
function myAddEvent(obj, ev, fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on'+ev, fn);
	}
	else
	{
		obj.addEventListener(ev, fn, false);
	}
}
myAddEvent(window,'load',function ()
{
	alert('a');
});
myAddEvent(window,'load',function ()
{
	alert('b');
});
</script>

小小樟鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中怎么绑定事件

我们想用两个window.onload的时候，起作用的其实是最后一个。就和变量一个道理，如果写 var a=5; a=9; 最后a是9；同学说，可以写到一个window.onload里面，但是实战项目中，我们都是分工合作的，每个人都想用自己的window.onload，这个时候就需要用到事件绑定了。window.onload=function (){ alert('a');};
复制链接

扫一扫