好好学一遍JavaScript 笔记(十)——IE跟DOM事件函数区别


欢迎技术交流。 QQ：138986722


1、获取目标

位于事件中心的对象称为目标(target).假设为<div/>元素分配onclick事件处理函数、触发click事件时、<div/>就被认为是目标。IE、目标包含在event对象的srcElement属性中：

 var oTarget = oEvent.srcElement;
在DOM兼容的浏览器中、目标包含在target属性中：
 var oTarget = oEvent.target;
示例：
<div id="divId" onclick="testFunction(event)">点击 </div>
  	<script type="text/javascript" >     
  		var sUserAgent = navigator.userAgent;     
		var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1;
  		var isMoz = sUserAgent.indexOf("Gecko") > -1;  
		function testFunction(oEvent){
			if(isIE){   
				alert("IE");
				var oEvent = window.event;   
				//IE、目标包含在event对象的srcElement属性中：
				var oTarget = oEvent.srcElement;   
				alert(oTarget.innerText);            
				return; 
			}   
			if(isMoz){
				alert("火狐: "+oEvent); 
				/**
				 * 
				 * 直接innerText这样火狐不支持、它支持innerHTML
				 * 所以要用innerText需要处理一下.  
				 * 
				 * 让火狐兼容innerText**/
				HTMLElement.prototype.__defineGetter__("innerText",
		        function ()
		        {
		            var anyString = "";
		            var childS = this.childNodes;
		            for (var i = 0; i < childS.length; i++)
		            {
		                if (childS[i].nodeType == 1)
		                    anyString += childS[i].tagName == "BR"
		                     ? "\r\n" : childS[i].textContent;
		                else if (childS[i].nodeType == 3)
		                    anyString += childS[i].nodeValue;
		            }
		            return anyString;
		        });
		        HTMLElement.prototype.__defineSetter__("innerText",
		        function (sText)
		        {
		            this.textContent = sText;  
		        });
		        /**end**/  
				//在DOM兼容的浏览器中、目标包含在target属性中：
				var oTarget = oEvent.target;    
				alert(oTarget.innerText);                      
				return;      
			}    
		}
		
  	</script>

2、阻止某个事件的默认行为IE必须将returnValue属性设值为false:

oEvent.returnValue = false;   
而在Mozilla中、只要调用preventDefault()方法:
oEvent.preventDefault();  
用户右击页面时、阻止他使用菜单。只要阻止contextmenu事件的默认行为就可以了：
    doucment.body.oncontextmenu = function (oEvent){
        if(isIE){
            oEvent = window.event;
            oEvent.returnValue = false;
        }else{
            oEvent.preventDefault();
        }
    };

3、停止事件复制(冒泡) 
IE中、要阻止事件进一步冒泡、必须设置cancelBubble属性为true:
oEvent.cancelBubble = true;     
在Mozilla中、只需调用stopPropagation()方法：
oEvent.stopPropagation();    
停止事件复制可以阻止事件流中的其它对象的事件处理函数执行、点击下面button按钮会弹出input、body、html这是因为事件先从input元素冒泡到body、然后到html ：  
<html onclick="alert('html');">
  <head>
    <title>停止事件复制(冒泡)</title>
  </head> 
  <body  onclick="alert('body');">
  	<input type="button" onclick="alert('input');" value="点击" />   
  </body> 
</html>
下面就在按钮上停止复制(冒泡)：
<html onclick="alert('html');">
  <head>
    <title>停止事件复制(冒泡)</title>
    <script type="text/javascript">
    	var sUserAgent = navigator.userAgent;       
		var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1;
    	function testClick(oEvent){
			alert("input");
			if(isIE){
				var oEvent = window.event;
				oEvent.cancelBubble = true;
			}else{
				oEvent.stopPropagation();  
			}   
		}   
    </script>
  </head> 
  <body  onclick="alert('body');">
  	<input type="button" onclick="testClick(event);" value="点击" />   
 <br /> 	
  </body> 
</html>




posted @ 2012-02-22 13:56  java程序员填空  阅读(190)  评论(0)    收藏  举报