【事件】研习兼容各大浏览器的事件监听

区分标准和IE的事件监听的方法，分析其细微区别

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> addEventListener </title>
 </head>

 <body>
  <script type="text/javascript">

	function girl(event)
	{
		var event=event || window.event;
		var evx=event.currentTarget || event.toElement;
		var evy=event.srcElement||event.Target;
		alert("captureing="+evx+"::"+evy);
		return true;
	}
	function boy(event)
	{
		var event=event || window.event;
		var evx=event.currentTarget || event.toElement;
		var evy=event.srcElement || event.Target;
		alert("bubble="+evx+"::"+evy);
		return true;
	}
	function stup()
{
	//captureing
	if(document.addEventListener)
	{
		document.addEventListener("click",girl,true);
		document.forms[0].addEventListener("click",girl,true);
		document.forms[0].elements[0].addEventListener("click",girl,true);
	}
	else
	{
		document.attachEvent("onclick",girl);
		document.forms[0].attachEvent("onclick",girl);
		document.forms[0].elements[0].attachEvent("onclick",girl);
	}

	//bubble
	if(document.addEventListener)
	{
		document.addEventListener("click",boy,false);
		document.forms[0].addEventListener("click",boy,false);
		document.forms[0].elements[0].addEventListener("click",boy,false);
	}
	else
	{
		document.attachEvent("onclick",boy);
		document.forms[0].attachEvent("onclick",boy);
		document.forms[0].elements[0].attachEvent("onclick",boy);
	}
}
	window.onload=function(){stup();}	
  </script>
     <form style="background-color:green;width:100px;height:100px;">
	<input type="submit" value="submit"/><br/>
  </form>
 </body>
</html>

　　

 分析：

在标准浏览器中测试良好

在IE中，click事件不支持toElement这个属性，所以会出现null

在文档发现，toElement这个属性是针对mouseover事件和mouseout事件的，注意注意

同时addEventListener中type类型的参数是不带on的，而attachEvent中type类型是带on的，切记

posted on 2011-11-30 20:10  十二月的黄昏  阅读(781)  评论(0)    收藏  举报