W3C和IE中的事件处理函数

    在上一篇文章中提到了关于传统的JS中注册事件对象的一些缺点和问题，下面是关于DOM2级的现代事件绑定。本文中设计到的HTML文件在文章最后

1、W3C事件处理函数

    “DOM2 级事件”定义了两个方法，用于添加事件和删除事件处理程序的操做：addEventListener()和 removeEventListener()。全部 DOM 节点中都包含这两个方法，而且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true 表示捕获，false 表示冒泡)。看看这两个方法在上一篇文章中的几个问题是否解决

问题一：事件覆盖问题----已经解决，下面两个事件注册函数都有值输出

 

<span style="font-size:18px;">        window.addEventListener("load",function(){
		alert("abc");
		},false);

	window.addEventListener("load",function(){
		alert("cde");
	},false);</span>

问题二：重复注册的问题----已解决。下面连续注册三次，但只是输出一个值

 

 

<span style="font-size:18px;"><span style="white-space:pre">	</span>function init(){
		alert("重复注册");
	}

	window.addEventListener("load",init,false);
	window.addEventListener("load",init,false);
	window.addEventListener("load",init,false);</span>

 

问题三：this自动传值的问题----已解决，下面的事件切换器中经过this可以表明box对象

 

<span style="font-size:18px;">	window.onload = function(){
		var box = document.getElementById("box");
		box.addEventListener("click",toBlue,false);
	}

	function toBlue(){
		this.className = "blue";
		this.removeEventListener("click",toBlue,false);	//必需要进行移除，不然只是可以切换一次
		this.addEventListener("click",toRed,false);
	}

	function toRed(){
		this.className = "red";
		this.removeEventListener("click",toRed,false);
		this.addEventListener("click",toBlue,false);
	}</span>

问题四：添加新的函数被覆盖或者只是执行一次----已经解决

 

 

<span style="font-size:18px;">	window.addEventListener("load",function(){
		var box = document.getElementById("box");
		box.addEventListener("click",function(){
			alert("xin di han shu");
		},false);
		box.addEventListener("click",toBlue,false);

	},false)</span>

新功能：W3C提供的这两个DOM2级事件绑定方法中，第三个参数表明的是是否能够进行捕获和冒泡操做，通常都为冒泡，下面两个输出都执行

 

 

<span style="font-size:18px;">	window.addEventListener("load",function(){
		var box = document.getElementById("box");
		box.addEventListener("click",function(){
			alert("DIV");
		},false);
		document.addEventListener("click",function(){
			alert("document");
		},false);

	},false)</span>

2、IE事件处理函数----下面的两个方法在高版本的浏览器中（包括IE11）已经不支持，可是IE8/IE9仍是支持，火狐和谷歌也不支持

 

IE 实现了与 DOM 中相似的两个方法：attachEvent()和 detachEvent()。这两个方法接受相同的参数：事件名称和函数。
在使用这两组函数的时候，区别：1.IE 不支持捕获，只支持冒泡；2.IE 添加事件不能屏蔽重复的函数；3.IE 中的 this 指向的是 window 而不是 DOM 对象。4.在传统事件上，IE 是没法接受到 event 对象的，但使用了 attchEvent()却能够，但有些区别。

问题一：覆盖问题----解决了，可是是倒叙输出，后注册的方法先执行

 

<span style="font-size:18px;">	window.attachEvent("onload",function(){
		alert("第一次");
	});
	window.attachEvent("onload",function(){

		alert("第二次");
	});</span>

问题二：重复注册问题----没有解决，下面一样有三个值输出

 

 

<span style="font-size:18px;">	window.attachEvent("onload",init);
	window.attachEvent("onload",init);
	window.attachEvent("onload",init);
	function init(){
		alert("重复");
	}
</span>

问题三：this自动传值问题----没有解决，这里面的this表明的是window对象

 

 

<span style="font-size:18px;">	window.onload = function(){
		var box = document.getElementById("box");
		box.attachEvent("onclick",function(){
			//alert(this === "box");
			alert(this === "window");
		});
	}</span>

问题四：添加额外的事件，只可以执行一次或者被覆盖----解决了

 

 

<span style="font-size:18px;">	window.onload = function(){
		var box = document.getElementById("box");
		box.attachEvent("onclick",function(){
			alert("diyici");
		});
		box.attachEvent("onclick",function(){
			alert("dierci");
		});
	}</span>

新的功能：可以经过传值的方法来获取event对象，这应该是一个比较好的方面

 

 

<span style="font-size:18px;">//传统方式不可以经过传值来获取event对象，可是经过attachEvent却能够
	window.onload = function(){
		var box = document.getElementById("box");
		//box.onclick = function(evt){
		//	alert(evt);	//传统方式中没法经过这种方法得到event对象
		//}

		box.attachEvent("onclick",function(evt){   //IE的现代事件绑定机制是能够的
			//alert(evt);
			//alert(typeof evt);
			//alert(evt.target.tagName);
			alert(window.event.target.tagName);
		});
	}</span>

IE8下DOM2级的事件切换器

 

 

<span style="font-size:18px;">//IE事件切换器,经过event对象下的srcEvent属性来获取事件源this对象
	window.onload = function(){
		var box = document.getElementById("box");
		box.attachEvent("onclick",toRed);
	}

	function toRed(){
		var that = window.event.srcElement;	//不可以传递this，用这个来获取事件源
		that.className = "red";
		that.detachEvent("onclick",toRed);
		that.attachEvent("onclick",toBlue);
	}

	function toBlue(){
		var that = window.event.srcElement;
		that.className = "blue";
		that.detachEvent("onclick",toBlue);
		that.attachEvent("onclick",toRed);
	}
</span>

 

 IE 中的事件绑定函数 attachEvent()和 detachEvent()已经被高版本的浏览器给淘汰了，平时也几乎不用它， 有几个缘由： 1.IE9 就将全面支持 W3C 中的事件绑定函数； 2.IE 的事件绑定函数没法传递 this； 3.IE的事件绑定函数不支持捕获； 4.同一个函数注册绑定后， 没有屏蔽掉； 5.有内存泄漏的问题

 

兼容下的事件切换器

因为在网上搜索了一下，IE8任然有很大的市场份额，故必须得作浏览器的兼容

 

<span style="font-size:18px;">//跨浏览器获取事件源
function getTag(evt){
	if(evt.target){	//W3C
		return evt.target;
	}else if(window.event.srcElement){
		return window.event.srcElement;		//IE
	}
}

//跨浏览器添加事件
function addEvent(obj,type,fun){
	if(obj.addEventListener){
		obj.addEventListener(type,fun,false);
	}else if(obj.attachEvent){
		obj.attachEvent("on"+type,fun);
	}
}

//跨浏览器移除事件
function removeEvent(obj,type,fun){
	if(obj.removeEventListener){
		obj.removeEventListener(type,fun,false);
	}else if(obj.detachEvent){
		obj.detachEvent("on"+type,fun);
	}
}

//给对象添加事件
addEvent(window,"load",function(){
	var box = document.getElementById("box");
	addEvent(box,"click",toBlue);
});

function toRed(evt){
	var that = getTag(evt);
	that.className = "red";
	removeEvent(that,"click",toRed);
	addEvent(that,"click",toBlue);
}

function toBlue(evt){
	var that = getTag(evt);
	that.className = "blue";
	removeEvent(that,"click",toBlue);
	addEvent(that,"click",toRed);
}</span>

 

涉及到关于HTML文件的东西：

 

<span style="font-size:18px;"> <head>
  <title> W3C和IE 中提供的DOM2级事件绑定函数 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <style>
	.red{
		width:200px;
		height:200px;
		background-color:red;
	}
	.blue{
		width:200px;
		height:200px;
		background-color:blue;
	}
  </style>
<script type="text/javascript" src="code2.js"></script>
 </head>

 <body>
  <div id="box">测试DIV</div>
 </body></span>