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

区分标准和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的,切记

你可能感兴趣的:(浏览器)