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

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

  
  
  
  
  1. var oTarget = oEvent.srcElement;   

在DOM兼容的浏览器中、目标包含在target属性中:

  
  
  
  
  1. var oTarget = oEvent.target;   

示例:

  
  
  
  
  1. <div id="divId" onclick="testFunction(event)">点击 </div>   
  2.     <script type="text/javascript" >        
  3.         var sUserAgent = navigator.userAgent;        
  4.         var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1;   
  5.         var isMoz = sUserAgent.indexOf("Gecko") > -1;     
  6.         function testFunction(oEvent){   
  7.             if(isIE){      
  8.                 alert("IE");   
  9.                 var oEvent = window.event;      
  10.                 //IE、目标包含在event对象的srcElement属性中:   
  11.                 var oTarget = oEvent.srcElement;      
  12.                 alert(oTarget.innerText);               
  13.                 return;    
  14.             }      
  15.             if(isMoz){   
  16.                 alert("火狐: "+oEvent);    
  17.                 /**  
  18.                  *   
  19.                  * 直接innerText这样火狐不支持、它支持innerHTML  
  20.                  * 所以要用innerText需要处理一下.    
  21.                  *   
  22.                  * 让火狐兼容innerText**/   
  23.                 HTMLElement.prototype.__defineGetter__("innerText",   
  24.                 function ()   
  25.                 {   
  26.                     var anyString = "";   
  27.                     var childS = this.childNodes;   
  28.                     for (var i = 0; i < childS.length; i++)   
  29.                     {   
  30.                         if (childS[i].nodeType == 1)   
  31.                             anyString += childS[i].tagName == "BR"   
  32.                              ? "\r\n" : childS[i].textContent;   
  33.                         else if (childS[i].nodeType == 3)   
  34.                             anyString += childS[i].nodeValue;   
  35.                     }   
  36.                     return anyString;   
  37.                 });   
  38.                 HTMLElement.prototype.__defineSetter__("innerText",   
  39.                 function (sText)   
  40.                 {   
  41.                     this.textContent = sText;     
  42.                 });   
  43.                 /**end**/     
  44.                 //在DOM兼容的浏览器中、目标包含在target属性中:   
  45.                 var oTarget = oEvent.target;       
  46.                 alert(oTarget.innerText);                         
  47.                 return;         
  48.             }       
  49.         }   
  50.            
  51.     </script>   

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

  
  
  
  
  1. oEvent.returnValue = false;   

而在Mozilla中、只要调用preventDefault()方法:

  
  
  
  
  1. oEvent.preventDefault();  

用户右击页面时、阻止他使用菜单。只要阻止contextmenu事件的默认行为就可以了:

  
  
  
  
  1. doucment.body.oncontextmenu = function (oEvent){   
  2.     if(isIE){   
  3.         oEvent = window.event;   
  4.         oEvent.returnValue = false;   
  5.     }else{   
  6.         oEvent.preventDefault();   
  7.     }   
  8. };   

3、停止事件复制(冒泡) 
IE中、要阻止事件进一步冒泡、必须设置cancelBubble属性为true:

  
  
  
  
  1. oEvent.cancelBubble = true

在Mozilla中、只需调用stopPropagation()方法:

  
  
  
  
  1. oEvent.stopPropagation();  

停止事件复制可以阻止事件流中的其它对象的事件处理函数执行、点击下面button按钮会弹出input、body、html这是因为事件先从input元素冒泡到body、然后到html :

  
  
  
  
  1. <html onclick="alert('html');">   
  2.   <head>   
  3.     <title>停止事件复制(冒泡)</title>   
  4.   </head>    
  5.   <body  onclick="alert('body');">   
  6.     <input type="button" onclick="alert('input');" value="点击" />      
  7.   </body>    
  8. </html> 

下面就在按钮上停止复制(冒泡):

 

  
  
  
  
  1. <html onclick="alert('html');">   
  2.   <head>   
  3.     <title>停止事件复制(冒泡)</title>   
  4.     <script type="text/javascript">   
  5.         var sUserAgent = navigator.userAgent;          
  6.         var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1;   
  7.         function testClick(oEvent){   
  8.             alert("input");   
  9.             if(isIE){   
  10.                 var oEvent = window.event;   
  11.                 oEvent.cancelBubble = true;   
  12.             }else{   
  13.                 oEvent.stopPropagation();     
  14.             }      
  15.         }      
  16.     </script>   
  17.   </head>    
  18.   <body  onclick="alert('body');">   
  19.     <input type="button" onclick="testClick(event);" value="点击" />      
  20.  <br />      
  21.   </body>    
  22. </html>   

 

 

你可能感兴趣的:(JavaScript,事件,职场,休闲,IE跟DOM区别)