好好學一遍JavaScript 筆記(十)——IE跟DOM事件函數區別

時間 2021-01-02

標籤 javascript html java node 瀏覽器 ide 函數 this spa prototype 欄目 JavaScript 简体版

原文原文鏈接

一、獲取目標
位於事件中心的對象稱爲目標(target).假設爲<div/>元素分配onclick事件處理函數、觸發click事件時、<div/>就被認爲是目標。IE、目標包含在event對象的srcElement屬性中：javascript

  
  
           
  
  
   
   
            
   
   var oTarget = oEvent.srcElement;

在DOM兼容的瀏覽器中、目標包含在target屬性中：html

  
  
           
  
  
   
   
            
   
   var oTarget = oEvent.target;

示例：java

  
  
           
  
  
   
   
            
   
   <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>

二、阻止某個事件的默認行爲IE必須將returnValue屬性設值爲false:node

  
  
           
  
  
   
   
            
   
   oEvent.returnValue = false;

而在Mozilla中、只要調用preventDefault()方法:瀏覽器

  
  
           
  
  
   
   
            
   
   oEvent.preventDefault();

用戶右擊頁面時、阻止他使用菜單。只要阻止contextmenu事件的默認行爲就能夠了：ide

  
  
           
  
  
   
   
            
   
   doucment.body.oncontextmenu = function (oEvent){   
   
   
            
   
       if(isIE){   
   
   
            
   
           oEvent = window.event;   
   
   
            
   
           oEvent.returnValue = false;   
   
   
            
   
       }else{   
   
   
            
   
           oEvent.preventDefault();   
   
   
            
   
       }   
   
   
            
   
   };

三、中止事件複製(冒泡)
IE中、要阻止事件進一步冒泡、必須設置cancelBubble屬性爲true:函數

  
  
           
  
  
   
   
            
   
   oEvent.cancelBubble = true;

在Mozilla中、只需調用stopPropagation()方法：this

  
  
           
  
  
   
   
            
   
   oEvent.stopPropagation();

中止事件複製能夠阻止事件流中的其它對象的事件處理函數執行、點擊下面button按鈕會彈出input、body、html這是由於事件先從input元素冒泡到body、而後到html ：spa

  
  
           
  
  
   
   
            
   
   <html onclick="alert('html');">   
   
   
            
   
     <head>   
   
   
            
   
       <title>中止事件複製(冒泡)</title>   
   
   
            
   
     </head>    
   
   
            
   
     <body  onclick="alert('body');">   
   
   
            
   
       <input type="button" onclick="alert('input');" value="點擊" />      
   
   
            
   
     </body>    
   
   
            
   
   </html>

下面就在按鈕上中止複製(冒泡)：prototype

  
  
           
  
  
   
   
            
   
   <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>