js中的事件绑定

1、事件绑定

    事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click(点击),load(载入),mouseover(鼠标经过).用于响应某个事件而调用的函数称为"事件处理函数"或者"事件监听函数".事件处理函数有两种分配方式:

1)在HTML页面中:

			<div οnclick="doSome()" />//点击后执行JS代码中已经定义好的函数:doSome;

2)在JS中:

		var oDiv = document.getElementById("testDiv");
				oDiv.onclick = function(){
   					 alert("我被点!");
				}

2、应用

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

首先，我们来看下面的代码：

				<span style="font-size:18px;"><script type="text/javascript">
					window.οnlοad=function (){
						alert('a');
					};
					window.οnlοad=function (){
						alert('b');
					<};
				</script></span>

在上面的两个window.onload事件中，待程序执行完的时候，弹出的只有“b”，why？因为在程序运行中，当第一个事件加载后运行完就开始加载第二个事件，所有就只能看到第二个事件所产生的结果。如果两个都想要看到，那么就需要用到事件的绑定了。

在看下面代码：

<script type="text/javascript">
			window.onload = function() {
				var oBtn = document.getElementById('btn');

				oBtn.attachEvent('onclick', function() {
					alert('a');
				});
				oBtn.attachEvent('onclick', function() {
					alert('b');
				});
			};
		</script>

在这里我们就对oBtn对象就行绑定addEventListener，在点击之后都可以显示出“a”和“b”。但又出现了问题，那就是兼容性问题，下面是进行处理后代码：

<script type="text/javascript">
			window.onload = function() {
				var oBtn = document.getElementById('btn');

				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 type="text/javascript">
			function addEvent(obj, ev, fn) {
				//IE起作用
				if(obj.attachEvent) {
					obj.attachEvent('on' + ev, fn);
				}
				//非IE起作用
				else {
					obj.addEventListener(ev, fn, false);
				}
			}
			window.onload = function() {
				var oBtn = document.getElementById('btn');

				addEvent(oBtn, 'click', function() {
					alert('a');
				});
				addEvent(oBtn, 'click', function() {
					alert('b');
				});
			}
		</script>

那么两个load加载就能解决了：

<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>